canvas.js

   var canvas = document.getElementById('mycanvas');
   var context = canvas.getContext('2d');

   context.strokeStyle = '#0000ff';
   context.lineWidth = 2;
   context.beginPath();

   context.fillStyle = '#00ff00'; //green
   context.fill();

   context.fillRect(100, 10, 150, 100);

   context.fillStyle = '#ffff00'; //yellow
   context.fillRect(10, 10, 50, 50);

   context.fillStyle = '#ffffff'; //white
   context.fillRect(10,10, 30, 30);

   context.fillStyle = '#000000'; //black
   context.fillRect(200, 180, 30, 30);

   context.fillStyle = '#990099'; //purple
   context.fillRect(180, 20, 80, 50);