let d = { width: 498, height: 665.1085141903172 }

​

let stage = new Konva.Stage({

  container: 'container',

  width: d.width,

  height: d.height,

});

​

let layer = new Konva.Layer();

stage.add(layer);

​

let img = new Image();

img.onload = function () {

  let konvaImage = new Konva.Image({

    image: img,

    width: d.width,

    height: d.height,

  });

​

  // Ajouter l'image à la couche

  layer.add(konvaImage);

  layer.draw();

};

​

img.src = 'https://64.media.tumblr.com/tumblr_mapvkz4afv1qiehnjo1_640.jpg';

​

let magnifierLayer = new Konva.Layer();

stage.add(magnifierLayer);

let zoom = [4, 2, 1]

​

let magnifier = new Konva.Circle({

  radius: 50 * 2, 

  fillPatternImage: img,

  fillPatternScale: { x: zoom[2], y: zoom[2] }, 

  fillPatternOffset: { x: 100, y: 100 },

  stroke: 'black',

  fillPatternRepeat: 'no-repeat',

  opacity: 1,

  strokeWidth: 0.5,

});

magnifierLayer.add(magnifier);

​

stage.on('mousemove', function (e) {

  let pos = stage.getPointerPosition();

  magnifier.position(pos);

  magnifier.fillPatternOffset({ x: pos.x, y: pos.y});

  magnifierLayer.batchDraw();

});

​

document.getElementById('container').style.cursor = 'none';