Using the itemBox api

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.

It is a good idea look at the source
and inspect elements

The image as copied from canvas
image

Copy the content of this page and try out a more intelligent canavas.

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');
  }
}