js: canvas and math

.. canvas CODE using the Math object

var ctx; function startCanvas() // Click within this function FIRST to init the canvas { var draw = document.getElementById("can"); ctx = draw.getContext("2d"); alert("canvas has been initialized"); }
<canvas width="600" height="300" class="gray" id="can"></canvas>
function lines() // Click within 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 within 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); }