We start out with an itemBox (b1)
that should contain a canvas. You can open this box and
at any time freeze the image and get it copied to the page.
Of course this canvas could have been more sophisticated, for instance like a sketchpad.
function start(){
// prepare the itembox
// called when boxes have been identified
var box=itemHolder.getBoxById('b1');
box.onShowContent=function(){drawHead()}
box.onHideContent=function(){stopDrawHead()}
}
//--------------------------
// all the canvas stuff
var rotimg = new Image();
rotimg.src = 'bs1.png';
var angle=0.05;
var rotcid='canid'
var timer=null;
// freeze and copy to image on page
function freeze(){
var elt=document.getElementById('frozen');
var canvas=document.getElementById('canid');
elt.src=canvas.toDataURL();
}
// stop the animation
function stopDrawHead(){
clearTimeout(timer);
timer=null;
}
//draw head, aagin and again
function drawHead()
{
var canvas = document.getElementById(rotcid);
if (canvas.getContext){
var dc = canvas.getContext('2d');
dc.restore();
dc.fillStyle="rgb(256,256,256)";
dc.fillRect(0,0,200,200);
dc.translate(50,50);
dc.rotate(angle);
dc.drawImage(rotimg, -25, -25, 50, 50);
dc.translate(-50,-50);
timer=setTimeout(drawHead,100);
dc.save();
}
else {
// canvas-unsupported
alert('cannot do canvas');
}
}