canvas image zoom

by Mariya Gnitetckaya

HTML

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

CSS

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

JavaScript

const size = {
	width: 200,
  height: 200
}
const element = document.getElementById('id');
const imgElement = new Image();
imgElement.src = 'https://i.imgur.com/SHo6Fub.jpg';

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = size.width;
canvas.height = size.height;
let image = ctx.drawImage(imgElement, 0, 0, size.width, size.height);
element.append(canvas);

let interval;
element.addEventListener('mouseenter', e => {
  zoom(20, 15, interval, true);
}, false);

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

function zoom(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);
}