javascript - Play/Pause any Canvas animation -

i'm building tool have iframe inside of user can put html containing canvas animation.

the purpose let them choose if want use createjs, adobe edge animate or other tool prefer.

despite need able play , pause canvas animation no matter tool used.

do think possible? or think tied framework used?

i've tried clearing request animation frame of page didn't work well.

iframe.contentwindow.cancelanimationframe(<don't know put in here without accessing animation framework>) 

do have suggestion?

thank you!

andrea

edit: in case scenario iframe sort of sand-box user can put whatever wants, javascript functioning of framework used

supporting different html5 canvas libraries

it theoretically possible because while libraries have own built-in animation methods, can use drawing methods , use own animation loop animate drawings.

but, wow! huge task. off top of head have to:

1. load code of users selected library - eg. easel.js.

2. create canvas dom element library must use display drawings.

3. create hook let them set particular libraries environment. example, easeljs user create stage: var stage = new createjs.stage("therequiredcanvas");

4. create hook let them run brand of code inside animation loop.

5. to hook code framework, have require them put code .js file loaded framework.

stopping...!

i'm going stop reasoning out solution here because more work user using own library.

the easy part of question: pausing & continuing animation

you can set flag stops animation loop.

when want continue animation clear flag , request animation loop.

example code:

var canvas=document.getelementbyid("canvas");  var ctx=canvas.getcontext("2d");  ctx.fillstyle='skyblue';  ctx.strokestyle='lightgray';  ctx.linewidth=3;  var cw=canvas.width;  var ch=canvas.height;      // animation pause when paused==true  var paused=false;    // testing, rotation angle animated rect  var angle=0;    // pause animation on #pause click  $('#pause').on('click',function(){    paused=true;  });    // continue animation on #continue click  $('#continue').on('click',function(){    paused=false;    requestanimationframe(animate);  });    // start animation loop  requestanimationframe(animate);    function animate(time){    if(paused){return;}      // animate    ctx.clearrect(0,0,cw,ch);    ctx.translate(cw/2,ch/2);    ctx.rotate(angle);    ctx.fillrect(-50,-50,100,100);    ctx.strokerect(-50,-50,100,100);    ctx.settransform(1,0,0,1,0,0);      // increase angle next loop    angle+=math.pi/60;      // request animation loop    requestanimationframe(animate);  }

body{ background-color: ivory; }  #canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <button id='pause'>pause</button>  <button id='continue'>continue</button>  <br>  <canvas id="canvas" width=300 height=300></canvas>