Function which draws the image.

draw.js

function draw(width, height) {
  canvas = $element.find("canvas");
  canvas.attr("width", width);
  canvas.attr("height", height);
  
  // Browser API which allows us to manipulate canvas pixels
  context = canvas[0].getContext("2d");
  
  image_data = context.createImageData(width, height);
  data = image_data.data
  
  // Keep track of the actual position in the bitmap
  var i = 0;
  
  for(var y = 0; y < height; ++y) {
    for(var x = 0; x < width; ++x) {
      // Calculate rgb value based on % height and width
      var rgb = xy2rgb(x/width, y/height);
      data[i + 0] = rgb[0]; // red
      data[i + 1] = rgb[1]; // green
      data[i + 2] = rgb[2]; // blue
      data[i + 3] = 255;    // opacity
      i += 4;
    }
  }
  
  context.putImageData(image_data, 0, 0);
}