Introdução ao Canvas

var canvas = document.getElementById (‘canvas’), // obter Eelement
context = canvas.getContext (‘2d’); // obtém o contexto do elemento

context.lineJoin = ‘redondo’; // define as linhas de conexão
context.lineWidth = 30; // define a largura da linha

context.font = ’24px Helvetica’; // define qualquer tamanho de texto e fonte
context.fillText (‘Clique em qualquer lugar para apagar’, 175, 200); // Adicione texto

context.strokeStyle = ‘goldenrod’; // cor do estilo de traço
context.fillStyle = ‘rgba (0,0,225,0.5)’; // cor do estilo de preenchimento

context.strokeRect (75, 100, 200, 200); // cria o elemento de traço
context.fillRect (325, 100, 200, 200); // cria elemento de preenchimento

context.canvas.onmousedown = function (e) {// Event handler
context.clearRect (0, 0, canvas.width, canvas.height); // reduz a transparência de todos os pixels na tela para zero
};