.. canvas CODE using the Math object

  
 var ctx;             
 function startCanvas() // Click this function to init the canvas
 {
    var draw = document.getElementById("can");
    ctx = draw.getContext("2d");     
 }   
 

<canvas width="600" height="300" class="gray" id="can"></canvas>
                 
function lines()  // Click this function to draw lines on the canvas
{ 
   ctx.lineWidth = Math.random()*5;
   ctx.strokeStyle='rgba(' + Math.round(Math.random()*255) + ','     
                           + Math.round(Math.random()*100) + ','     
                           + Math.round(Math.random()*255) + ','     
                           + Math.random()*2.0  + ')';
    ctx.beginPath();
    ctx.moveTo(Math.random() * 500, Math.random() * 250);    
    ctx.lineTo(Math.random() * 600, Math.random() * 250);   
    ....  
    ctx.stroke();       
}     

function rect(x) // Click this function to draw shapes on the canvas
{      
   ctx.clearRect(0, 0, 600,300);  // x,y,w,h     
   do
   {
      ctx.fillStyle='rgba(' + Math.round(Math.random()*255)  + ','     
                            + Math.round(Math.random()*100)  + ','     
                            + Math.round(Math.random()*255)  + ','     
                            + Math.random()*2.0  + ')'; 
      // x,y,w,h
      ctx.fillRect(Math.floor(Math.random()*400), Math.floor(Math.random()*250),
                   Math.floor(Math.random()*140), Math.floor(Math.random()*100));
      ....                      
      // x, y, radius, startAngle, endAngle, anticlockwise         
      ctx.arc( Math.floor(Math.random()*450), Math.floor(Math.random()*250),
               Math.floor(Math.random()*40),  0.0, (Math.PI * 2), true); 
      ctx.fill();// actually draws here
   }while(--x > 0);
}