canvas image zoom - JSFiddle

by Mariya Gnitetckaya

HTML

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

<div id="id1"></div>

CSS

#id, #id1{
  width: 200px;
  height: 200px;
  cursor: pointer;
}

#id1 canvas{
  transition: 0.2s; 
  transform: scale(1);
}

#id1:hover canvas{   
   transform: scale(1.03)
}

JavaScript

const size = {
	width: 200,
  height: 200
}
const element0 = document.getElementById('id');
const element1 = document.getElementById('id1');
const imgElement = new Image();
imgElement.src = 'https://i.imgur.com/SHo6Fub.jpg';
let elements = [element0, element1];
elements.forEach((el, i) => {
	const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = size.width;
  canvas.height = size.height;
  ctx.drawImage(imgElement, 0, 0, size.width, size.height);
  el.append(canvas);
  if (i === 0) {
  	let interval;
    element0.addEventListener('mouseenter', e => {
      zoom(ctx, 20, 15, interval, true);
    }, false);

    element0.addEventListener('mouseleave', e => {
      zoom(ctx, 20, 15, interval, false);
    }, false);
  }
})


function zoom(ctx, px, speed, interval, increase) {
  let i = increase ? 0 : px;
  clearInterval(interval);
  interval = setInterval(() => {
    i = (increase) ? (i + 1) : (i - 1);
    ctx.drawImage(imgElement, -i/2, -i/2, size.width + i, size.height + i);
    if ((increase && i === px) || (!increase && i === 0)) {
      clearInterval(interval);
    }
  }, speed);
}