Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.