Canvas mouse drawing with colors

by corinnekm

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector( 'canvas' ),
    c = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    level = 0;

canvas.width = 500;
canvas.height = 500;

function draw(){
  c.fillStyle = "hsl("+(level*5)+", 100%, 50%)"; 
  c.beginPath();
  c.arc( mouseX, mouseY, 20 , 0, Math.PI*2, true );
  c.closePath();
  c.fill();
  level++;
}

canvas.addEventListener( 'mousemove', function( event ) {
  if(event.offsetX){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
  } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
  }
  draw();
}, false );