mbriggs/jsbin.damaq.css

## jsbin.damaq.css
canvas {
  position: absolute;
  top: 0;
  width: 500px;
  height: 500px;
  cursor: move;
}

.canvas-container {
  position: relative;
  border: 1px dashed;
  width: 500px;
  height: 500px;
}

img {
  display: none;
}

## jsbin.damaq.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="canvas fun" />
<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <p>
    <h3>bg color</h3>
    <button id='red'>red</button>
    <button id='blue'>blue</button>
    <button id='purple'>purple</button>
  </p>
  <p>
    <h3>scaling</h3>
    <button id='five'>five</button>
    <button id='ten'>ten</button>
    <button id='fifty'>fifty</button>
    <button id='hundred'>hundred</button>
  </p>

  <div class='canvas-container'>
    <canvas id='canvas-bg'></canvas>
    <canvas id='canvas-img'></canvas>
  </div>


  <img id='i' src="http://itdisplay.com/wp-content/uploads/2013/06/16.jpg"/>
</body>
</html>

## jsbin.damaq.js
$.fn.pannable = function(){
  var $canvas = this;
  var canvas = this.get(0);
  var bounds = canvas.getBoundingClientRect();
  var ctx = canvas.getContext('2d');

  var panning = false;
  var startPoint;


  $canvas.mousedown(function(e){
    panning = true;
    startPoint = getPoint(e);
  });

  $canvas.mouseup(function(e){
    panning = false;

    $canvas.trigger("panning-complete");
  });

  $canvas.mousemove(function(e){
    if(!panning) return;
    var point = getPoint(e);
    $canvas.trigger('redraw', getDistance(startPoint, point));
    startPoint = point;
  });

  function getDistance(start, end){
    return {
      x: end.x - start.x,
      y: end.y - start.y
    };
  }

  function getPoint(pos){
    return {
      x: (pos.clientX - bounds.left) * (canvas.width / bounds.width),
      y: (pos.clientY - bounds.top) * (canvas.height/ bounds.height)
    };
  }
};


$(function(){
  var bg = document.getElementById('canvas-bg').getContext('2d');

  var image = {
    x: 0,
    y: 0,
    scale: 1,

    ctx: document.getElementById('canvas-img').getContext('2d'),
    el: document.getElementById('canvas-img'),
    imageEl: document.getElementById('i'),
    $el: $("#canvas-img"),


    move: function(distance){
      this.x += distance.x;
      this.y += distance.y;
    },

    draw: function(){
      this.ctx.drawImage(this.imageEl, this.x, this.y, this.imageEl.width * this.scale, this.imageEl.height * this.scale);
    },

    clear: function(){
      this.el.width = this.el.width;
    }
  };

  image.$el.pannable();
  image.$el.on('redraw', function(e, distance){
    image.move(distance);
    image.clear();
    image.draw();
  });

  image.$el.on('panning-complete', function(e){
    image.draw();
  });
  image.draw();


  $('#red').click( _.partial(drawBG, "200,0,0") );
  $('#purple').click( _.partial(drawBG, "200,0,255") );
  $('#blue').click( _.partial(drawBG, "0,25,255") );

  $('#five').click( _.partial(setScale, 0.05) );
  $('#ten').click( _.partial(setScale, 0.1) );
  $('#fifty').click( _.partial(setScale, 0.5) );
  $('#hundred').click( _.partial(setScale, 1) );


  function setScale(val){
    image.scale = val;
    image.clear();
    image.draw();
  }

  function drawBG(color){
    bg.fillStyle = "rgb("+color+")";
    bg.fillRect(0, 0, 500, 500);
  }

});
	canvas {
	position: absolute;
	top: 0;
	width: 500px;
	height: 500px;
	cursor: move;
	}

	.canvas-container {
	position: relative;
	border: 1px dashed;
	width: 500px;
	height: 500px;
	}

	img {
	display: none;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="canvas fun" />
	<script src="http://static.jsbin.com/js/vendor/traceur.js"></script>
	<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<p>
	<h3>bg color</h3>
	<button id='red'>red</button>
	<button id='blue'>blue</button>
	<button id='purple'>purple</button>
	</p>
	<p>
	<h3>scaling</h3>
	<button id='five'>five</button>
	<button id='ten'>ten</button>
	<button id='fifty'>fifty</button>
	<button id='hundred'>hundred</button>
	</p>

	<div class='canvas-container'>
	<canvas id='canvas-bg'></canvas>
	<canvas id='canvas-img'></canvas>
	</div>


	<img id='i' src="http://itdisplay.com/wp-content/uploads/2013/06/16.jpg"/>
	</body>
	</html>
	$.fn.pannable = function(){
	var $canvas = this;
	var canvas = this.get(0);
	var bounds = canvas.getBoundingClientRect();
	var ctx = canvas.getContext('2d');

	var panning = false;
	var startPoint;


	$canvas.mousedown(function(e){
	panning = true;
	startPoint = getPoint(e);
	});

	$canvas.mouseup(function(e){
	panning = false;

	$canvas.trigger("panning-complete");
	});

	$canvas.mousemove(function(e){
	if(!panning) return;
	var point = getPoint(e);
	$canvas.trigger('redraw', getDistance(startPoint, point));
	startPoint = point;
	});

	function getDistance(start, end){
	return {
	x: end.x - start.x,
	y: end.y - start.y
	};
	}

	function getPoint(pos){
	return {
	x: (pos.clientX - bounds.left) * (canvas.width / bounds.width),
	y: (pos.clientY - bounds.top) * (canvas.height/ bounds.height)
	};
	}
	};


	$(function(){
	var bg = document.getElementById('canvas-bg').getContext('2d');

	var image = {
	x: 0,
	y: 0,
	scale: 1,

	ctx: document.getElementById('canvas-img').getContext('2d'),
	el: document.getElementById('canvas-img'),
	imageEl: document.getElementById('i'),
	$el: $("#canvas-img"),


	move: function(distance){
	this.x += distance.x;
	this.y += distance.y;
	},

	draw: function(){
	this.ctx.drawImage(this.imageEl, this.x, this.y, this.imageEl.width * this.scale, this.imageEl.height * this.scale);
	},

	clear: function(){
	this.el.width = this.el.width;
	}
	};

	image.$el.pannable();
	image.$el.on('redraw', function(e, distance){
	image.move(distance);
	image.clear();
	image.draw();
	});

	image.$el.on('panning-complete', function(e){
	image.draw();
	});
	image.draw();


	$('#red').click( _.partial(drawBG, "200,0,0") );
	$('#purple').click( _.partial(drawBG, "200,0,255") );
	$('#blue').click( _.partial(drawBG, "0,25,255") );

	$('#five').click( _.partial(setScale, 0.05) );
	$('#ten').click( _.partial(setScale, 0.1) );
	$('#fifty').click( _.partial(setScale, 0.5) );
	$('#hundred').click( _.partial(setScale, 1) );


	function setScale(val){
	image.scale = val;
	image.clear();
	image.draw();
	}

	function drawBG(color){
	bg.fillStyle = "rgb("+color+")";
	bg.fillRect(0, 0, 500, 500);
	}

	});