Multi-touch Canvas scale with pinch zoom

How to enable pan and pinch zoom for canvas stage?

Inside touchmove callback we can get access to all native properties of touch events with e.evt.touches . So we just need to manually calculate position and scale properties of the stage, when two pointers are used in touchmove .

Note: This lab only works on devices that support multi-touch gestures because it makes use of multiple touch events.

Instructions: Using a mobile device that supports multi-touch gestures, use two fingers to zoom in or out of the stage.

Vanilla
React
Vue

import Konva from 'konva';
// by default Konva prevent some events when node is dragging
// it improve the performance and work well for 95% of cases
// we need to enable all events on Konva, even when we are dragging a node
// so it triggers touchmove correctly
Konva.hitOnDragEnabled = true;
const width = window.innerWidth;
const height = window.innerHeight;
const stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height,
  draggable: true,
});
const layer = new Konva.Layer();
const triangle = new Konva.RegularPolygon({
  x: 190,
  y: stage.height(




    
) / 2,
  sides: 3,
  radius: 80,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 4,
});
const circle = new Konva.Circle({
  x: 380,
  y: stage.height() / 2,
  radius: 70,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
});
function getDistance(p1, p2) {
  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
function getCenter(p1, p2) {
  return {
    x: (p1.x + p2.x) / 2,
    y: (p1.y + p2.y) / 2,
let lastCenter = null;
let lastDist = 0;
let dragStopped = false;
stage.on('touchmove', function (e) {
  e.evt.preventDefault();
  const touch1 = e.evt.touches[0];
  const touch2 = e.evt.touches[1];
  // we need to restore dragging, if it was cancelled by multi-touch
  if (touch1 && !touch2 && !stage.isDragging() && dragStopped) {
    stage.startDrag();
    dragStopped = false;
  if (touch1 && touch2) {
    // if the stage was under Konva's drag&drop
    // we need to stop it, and implement our own pan logic with two pointers
    if (stage.isDragging()) {
      dragStopped = true;
      stage.stopDrag();
    const rect = stage.container().getBoundingClientRect();
    const p1 = {
      x: touch1.clientX - rect.left,
      y: touch1.clientY - rect.top,
    const p2 = {
      x: touch2.clientX - rect.left,
      y: touch2.clientY - rect.top,
    if (!lastCenter) {
      lastCenter = getCenter(p1, p2);
      return;
    const newCenter = getCenter(p1, p2);
    const dist = getDistance(p1, p2);
    if (!lastDist) {
      lastDist = dist;
    // local coordinates of center point
    const pointTo = {
      x: (newCenter.x - stage.x()) / stage.scaleX(),
      y: (newCenter.y - stage.y()) / stage.scaleX(),
    const scale = stage.scaleX() * (dist / lastDist);
    stage.scaleX(scale);
    stage.scaleY(scale);
    // calculate new position of the stage
    const dx = newCenter.x - lastCenter.x;
    const dy = newCenter.y - lastCenter.y;
    const newPos = {
      x: newCenter.x - pointTo.x * scale + dx,
      y: newCenter.y - pointTo.y * scale + dy,
    stage.position(newPos);
    lastDist = dist;
    lastCenter = newCenter;
});
stage.on('touchend',




    
 function () {
  lastDist = 0;
  lastCenter = null;
});
layer.add(triangle);
layer.add(circle);
stage.add(layer);

How to enable pan and pinch zoom for canvas stage? ​

How to enable pan and pinch zoom for canvas stage?