css - JavaScript animation clingy circles -

css - JavaScript animation clingy circles -

on canvas animation, have problem circles getting drawn "without metaphorical pen" lifting canvas.

i need way stop function , draw 1 circle one.

here jsfiddle (warning: uses 100% of 1 logical processor core/thread).

javascript:

window.requestanimframe = (function(callback) { homecoming window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimationframe || function(callback) { window.settimeout(callback, 1000 / 60); }; })(); var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); var size = 19; var size_two = 19; function start(){ requestanimationframe(start); size++; context.arc(95, 85, size, 0, 2*math.pi); context.stroke(); } function othercircle(){ requestanimationframe(othercircle); size_two++; context.arc(500, 300, size_two, 0, 3*math.pi); } start(); othercircle();

the other answers good, wanted highlight why unwanted line appearing.

your unwanted connecting line

the unwanted connecting line created because must phone call context.beginpath() before drawing each arc. if don't phone call begainpath browser assumes want connect 2 circle paths.

context.beginpath() context.arc(95, 85, size, 0, 2*math.pi); context.stroke(); context.beginpath(); context.arc(200, 200, size_two, 0, 3*math.pi); context.stroke();

just couple more notes

your othercircle drawing arc that's 3 * pi. 2*pi finish circle , value above 2*pi not add together circle.

if intent draw expanding stroke-circle, should clear canvas @ start of each animation loop (before drawing expanded circles).

one requestanimationframe enough. can set both circle , othercircle code in 1 requestanimationframe.

example code , demo: http://jsfiddle.net/m1erickson/62mff/

var sizecounter=19; var maxsizecounter=60; var size = sizecounter; var maxsize=40; var size_two = sizecounter; var maxsizetwo=60; function start(){ if(sizecounter<maxsizecounter){ requestanimationframe(start); } // clear canvas if want strokes instead of filled circles context.clearrect(0,0,canvas.width,canvas.height); context.beginpath() context.arc(95, 85, size, 0, 2*math.pi); context.stroke(); if(size<maxsize){ size++; } context.beginpath(); context.arc(200, 200, size_two, 0, 3*math.pi); context.stroke(); if(size_two<maxsizetwo){ size_two++; } sizecounter++; } start();

javascript css animation canvas circle