Canvas Introduction

var canvas = document.getElementById('canvas'), //get Eelement
context = canvas.getContext('2d'); //get context of element

context.lineJoin = 'round'; //set the connecting lines
context.lineWidth = 30; //set the line width

context.font = '24px Helvetica'; //set any text size and font
context.fillText('Click anywhere to erase', 175, 200); // add text

context.strokeStyle = 'goldenrod'; //color of stroke style
context.fillStyle = 'rgba(0,0,225,0.5)'; //color of fill style

context.strokeRect(75, 100, 200, 200); //create stroke element
context.fillRect(325, 100, 200, 200); //create fill element

context.canvas.onmousedown = function(e){ //Event handler
context.clearRect(0, 0, canvas.width, canvas.height); //reduce transparency of all the pixels in canvas to zero
};