canvas color picker

HTML

<canvas id="color-block" height="300" width="300"></canvas>
<canvas id="color-strip" height="50" width="300"></canvas>

CSS

#color-strip, #color-block {
    margin: 20px;
}

JavaScript

var colorBlock = document.getElementById('color-block');
var ctx1 = colorBlock.getContext('2d');
var width1 = colorBlock.width;
var height1 = colorBlock.height;

var colorStrip = document.getElementById('color-strip');
var ctx2 = colorStrip.getContext('2d');
var width2 = colorStrip.width;
var height2 = colorStrip.height;

ctx1.rect(0, 0, width1, height1 );
ctx1.fillStyle = 'red';
ctx1.fill();

ctx2.rect(0, 0, width2, height2);
var grd1 = ctx2.createLinearGradient(0, 0, 0, height1);
grd1.addColorStop(0, 'rgba(255, 0, 0, 1)');   
grd1.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grd1.addColorStop(0.34, 'rgba(0, 255, 0, 1)');   
grd1.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grd1.addColorStop(0.68, 'rgba(0, 0, 255, 1)');   
grd1.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grd1.addColorStop(1, 'rgba(255, 0, 0, 1)');
ctx2.fillStyle = grd1;
ctx2.fill();

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

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

function mouseup(e){
  drag = false;
}

colorStrip.addEventListener("mousedown", mouseDownListener, false);
colorStrip.addEventListener("mousedown", mouseDownListener, false);
colorStrip.addEventListener("mousedown", mouseDownListener, false);