Drag Canvas + JQuery

by black strings

HTML

<div id="coords">
  <p>Drag the gradient with the mouse</p>
  <p>x: <span id="x"></span></p>
  <p>y: <span id="y"></span></p>
</div>
<canvas id="source" width="4000" height="4000"></canvas>

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

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#source {
  display: none;
}

#coords{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;             
}
#coords p{
  background: #fff;
}

JavaScript

var $window; 
var img;
var $source; var source; var sourceContext;
var $target; var target; var targetContext;
var scroll = {
  x : 0,
  y : 0
};
var scrollMax;

init();

function init() {
  // Get DOM elements
  $window = $(window);
  $source = $('canvas#source');
  source = $source[0];
  sourceContext = source.getContext("2d");
  $target = $('canvas#target');
  target = $target[0];
  targetContext = target.getContext("2d");

  // Draw something in source canvas
  sourceContext.rect(0, 0, source.width, source.height);
  var grd = sourceContext.createLinearGradient(0, 0, source.width, source.height);
  grd.addColorStop(0, '#800080');
  grd.addColorStop(0.125, '#4B0082');
  grd.addColorStop(0.25, '#0000FF');
  grd.addColorStop(0.325, '#008000');
  grd.addColorStop(0.5, '#FFFF00');
  grd.addColorStop(0.625, '#FFA500');
  grd.addColorStop(0.75, '#FF0000');
  grd.addColorStop(0.825, '#800080');                

  sourceContext.fillStyle = grd;
  sourceContext.fill();

  /*
             * Setup drag listening for target canvas to scroll over source canvas
             */                 
  function onDragging(event){
    var delta = {
      left : (event.clientX - event.data.lastCoord.left),
      top : (event.clientY - event.data.lastCoord.top)
    };

    var dx = scroll.x - delta.left;
    if (dx < 0) {
      scroll.x = 0;
    } else if (dx > scrollMax.x) {
      scroll.x = scrollMax.x;
    } else {
      scroll.x = dx;
    }

    var dy = scroll.y - delta.top;
    if (dy < 0) {
      scroll.y = 0;
    } else if (dy > scrollMax.y) {
      scroll.y = scrollMax.y;
    } else {
      scroll.y = dy;
    }

    event.data.lastCoord = {
      left : event.clientX,
      top : event.clientY
    }

    draw();
  }

  function onDragEnd(){
    $(document).unbind("mousemove", onDragging);
    $(document).unbind("mouseup", onDragEnd);
  }

  function onDragStart(event){
    event.data = {
      lastCoord:{
        left : event.clientX,
        top : event.clientY
      }
   ...