Project 4

Canvas haa neat property called save(); and restore(); which allows you to be able to store certain codes and be able to call them. Learning this technique can save you time.

To view and example click here.

The source code:

function draw(){
 var ctx = document.getElementById('canvas').getContext('2d');

   ctx.fillStyle = '#0000FF'
   ctx.fillRect(0, 0, 15, 15);
   ctx.save();                 

   ctx.fillStyle = '#FFA500'
   ctx.fillRect(5,5,120,120);
   ctx.save();

   ctx.fillStyle = '#C34A2C'
   ctx.globalAlpha = 1.5;
   ctx.fillRect(3,3,90,90);

   ctx.restore();
   ctx.fillRect(4,4,60,60);

   ctx.restore();
   ctx.fillRect(6,6,30,30);
}