Canvas zoom in-out

by bc_rikko

HTML

<div id="image">
</div>

CSS

#image > canvas {
  border: dashed 4px #7b9cc4;
}

JavaScript

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.getElementById('image').appendChild(canvas);

const img = new Image();
img.src = 'https://ja.wikipedia.org/static/images/project-logos/jawiki.png';
img.crossOrigin = 'anonymous';

img.onload = () => {
  // Canvasを画像のサイズに合わせる
  canvas.height = img.height;
  canvas.width  = img.width;

  // Canvasに描画する
  ctx.drawImage(img, 0, 0);
};

img.onerror = () => {
  console.log('画像の読み込み失敗');
};

// ドラッグで移動
// ドラッグ状態かどうか
let isDragging = false;
// ドラッグ開始位置
let start = {
  x: 0,
  y: 0
};
// ドラッグ中の位置
let diff = {
  x: 0,
  y: 0
};
// ドラッグ終了後の位置
let end = {
  x: 0,
  y: 0
}
const redraw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, diff.x, diff.y)
};
canvas.addEventListener('mousedown', event => {
  isDragging = true;
  start.x = event.clientX;
  start.y = event.clientY;
});
canvas.addEventListener('mousemove', event => {
  if (isDragging) {
    diff.x = (event.clientX - start.x) + end.x;
    diff.y = (event.clientY - start.y) + end.y;
    redraw();
  }
});
canvas.addEventListener('mouseup', event => {
  isDragging = false;
  end.x = diff.x;
  end.y = diff.y;
});