2

I have a fiddle of what I've achieved so far with Animating a Canvas.

http://jsfiddle.net/skerwin/uhVj6/6/

I'm trying to make a duplicate of the canvas, I want to change the amount it grows

Circle One: 

var endPercent = 65;
var curPerc = 0;

Circle Two:

 var endPercent = 45;
 var curPerc = 0;

I'm really new to Jquery/Animations and Canvas. What do i have to do to duplicate the Animation code to make 2 Canvas' animate at the same time.?

BigOrinj
  • 243
  • 2
  • 6
  • 14
  • Hey now.. you have a fiddle of what *I've* acheived so far :P http://stackoverflow.com/questions/15692353/animate-a-canvas-circle-to-draw-on-load/15693230#15693230 – Loktar Mar 30 '13 at 14:50
  • I know. you greatly helped me. Majority of the work was done by you. noted. – BigOrinj Mar 30 '13 at 15:47

2 Answers2

3

Maybe something like this? http://jsfiddle.net/dLAVe/ I wraped the code in a new animate function and changed the name of your animate function to render. The animate function now takes two arguments, the id of the element and the number of percentage.

user1823799
  • 120
  • 7
  • Additionally you can change ´if (curPerc < endPercent)´ to ´if (curPerc <= endPercent)´ to make sure the 100% goes the full circle. Corrected version here: http://jsfiddle.net/dLAVe/1/ – user1823799 Mar 30 '13 at 13:54
  • Absolutely Perfect. Thankyou. – BigOrinj Mar 30 '13 at 15:50
0

i think i like user1823799's answer better. but here is my solution to it. i basically added another canvas and context and in the same function i am checking for whether if the second arc reached its limit.

http://jsfiddle.net/btevfik/6SuCC/

btevfik
  • 3,391
  • 3
  • 27
  • 39