Draggable Canvas Example

by Peter Jang

HTML

<body>
  <canvas></canvas>
</body>

CSS

canvas {
  background: lightgray;
}

JavaScript

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var canvasX = 0, canvasY = 0;
var xDragging = null, yDragging = null;

var draw = function() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setTransform(1, 0, 0, 1, canvasX, canvasY);
  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 50, 50);
  ctx.fillStyle = "blue";
  ctx.fillRect(30, 30, 50, 50);
};

canvas.addEventListener('mousedown', function(event) {
  xDragging = event.offsetX;
  yDragging = event.offsetY;
}, false);

canvas.addEventListener('mousemove', function(event) {
  if (xDragging !== null && yDragging !== null) {
    canvasX += event.offsetX - xDragging;
    canvasY += event.offsetY - yDragging;
    draw();
    xDragging = event.offsetX;
    yDragging = event.offsetY;
  }
}, false);

canvas.addEventListener('mouseup', function(event) {
  xDragging = null;
  yDragging = null;
}, false);

draw();