canvas - draw shape with mouse

by Amanda Williamson

HTML

<canvas id="canvas"></canvas>

JavaScript

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

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

var x;
var y;
var w;
var h;
var drag = false;
var randomColor;

function mousedown(e){
  randomColor = getRandomColor();
  drag = true;
  x = e.offsetX; 
  y = e.offsetY;
}

function mousemove(e){
  if(drag){
    w = e.offsetX - x; 
    h = e.offsetY - y;
    draw();
  }
}

function draw() {
  ctx.fillStyle = randomColor;
  ctx.fillRect(x, y, w, h);   
}

function mouseup(e){
  drag = false;
}

function getRandomColor() {
  var r = 255*Math.random()|0,
      g = 255*Math.random()|0,
      b = 255*Math.random()|0;
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}


canvas.addEventListener("mousedown", mousedown, false);
canvas.addEventListener("mouseup", mouseup, false);
canvas.addEventListener("mousemove", mousemove, false);