// Nuestras variables var canvas, ctx; // Obtenemos una referencia al canvas canvas = document.getElementById('canvas'); // Y a su "contexto 2d" ctx = canvas.getContext('2d'); // Hoy pintamos de rojo ctx.fillStyle = "#f00"; // Creamos el listener canvas.addEventListener('click', function(ev) { // Borramos ctx.clearRect(0, 0, 300, 300); // Comenzamos una figura ctx.beginPath(); // Creamos el circulo ctx.arc(ev.clientX, ev.clientY, 25, 0, Math.PI*2, true); // Cerramos la figura ctx.closePath(); // Y rellenamos ctx.fill(); }, false);
<canvas id="canvas" width="300" height="300"></canvas>
canvas { background: #ccc; }