Tegning

function drawRectangle(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext){
        var dc = canvas.getContext('2d');
        dc.fillStyle = "rgb(200,0,0)";
        dc.fillRect (10, 10, 80, 80);
    } 
    else {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}

function drawHouse(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext){
        var dc = canvas.getContext('2d');
        dc.fillStyle = "rgb(0,0,200)";
        dc.fillRect (20, 50, 60, 50);
        
        dc.beginPath();
        dc.moveTo(10,60);
        dc.lineTo(90,60);
        dc.lineTo(50,10);
        dc.fill();
    } 
    else 
         alert('cannot do canvas');
}

function drawFace(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext){
         var dc = canvas.getContext('2d');
         var img = new Image();   
         img.onload = function(){  
               dc.drawImage(img, 10, 10, 80, 80) ;
         }  
         img.src ='bs8.png'; 
    } 
    else 
        alert('cannot do canvas');
}

function drawSinus(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext){
        var dc = canvas.getContext('2d');
        dc.fillStyle = "rgb(256,256,150)";
        // match canvas dimensions: (180,100)
        dc.scale(0.5,0.5);
        dc.fillRect (0, 0, 360, 200);
        dc.strokeStyle = "rgb(0,0,0)";        
        dc.beginPath();
        dc.moveTo(0,100);
        dc.lineTo(360,100);
        dc.stroke();
        
        dc.strokeStyle = "rgb(200,0,0)";
        dc.beginPath();
            dc.moveTo(0,100);
            for (v=0; v<360; v++){
                rad=1.0*v*(2.0*Math.PI)/360.0;
                dc.lineTo(v,100-Math.round(100*Math.sin(rad)));
            }
        dc.stroke();
    } 
    else 
        alert('cannot do canvas');
}

var imgno=0;
var animCanvas=null;
var imList=null;
function setup(cid)
{
    animCanvas = document.getElementById(cid);
    if (animCanvas.getContext){
        imList=new Array();
        for(var ix=0;ix<5;ix++){
            imList[ix]=new Image();
            imList[ix].src = 'bs'+(ix+1)+'.png';
        }
    }        
}
function animatef(cid)
{
    if(!imList)
        setup(cid)
    else{
        var dc = animCanvas.getContext('2d');
        dc.fillStyle = "rgb(255,255,255)";
        dc.fillRect (0, 0, 600, 150);
        for(var ix=0;ix<imList.length;ix++){
             var imtop=50;
             if(ix==imgno)
                 imtop=20;
             dc.drawImage(imList[ix], ix*70, imtop, 60, 60) 
        }        
        imgno++;
        if(imgno > imList.length)
            imgno=0;
    }
    setTimeout(animatef,200);
}

var rotimg = new Image();   
rotimg.src = 'bs1.png';
var angle=0.05; 
var rotcid=null;
function drawIt()
{
    var canvas = document.getElementById(rotcid);
    if (canvas.getContext){
          var dc = canvas.getContext('2d');
        dc.fillStyle="rgb(256,256,256)";
        dc.fillRect(0,0,100,100);
        dc.translate(50,50);        
        dc.rotate(angle);
        dc.drawImage(rotimg, -25, -25, 50, 50);
        dc.translate(-50,-50);
        setTimeout(drawIt,100);
    } 
    else 
        alert('cannot do canvas');
}
function rotateHead(canid){
    rotcid=canid;
    drawIt();
}