JSFiddle - React, Tailwind, and code Playground

by Sam88

HTML

<div class="container">
    <section class="left">
        <canvas id="myCanvas" height=1024 width=360></canvas>
    </section>
</div>

JavaScript

//canvas touch drag

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 100;
var destY = 200;
var clickY = 0;
var clickX = 0;
var scale = 1;
var lastDist = 0;
var imageObj = new Image();

function getDistance(p1, p2) {
    return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}

imageObj.onload = function () {
    draw();
};
imageObj.src = "https://www.google.co.uk/images/srpr/logo3w.png";

var mouseDown = false;

canvas.addEventListener('touchstart', function (e) {
        e.preventDefault();
    var touch = e.targetTouches[0];
    clickX = touch.clientX - destX;
    clickY = touch.clientY - destY;
}, false);


canvas.addEventListener('touchend', function (e) {
    e.preventDefault();
}, false);


canvas.addEventListener('touchmove', function (e) {
 e.preventDefault();
    if (e.targetTouches.length == 1) {
        var touch1 = e.targetTouches[0];
        //var touch2 = e.targetTouches[1];
        destX = touch1.clientX - clickX;
        destY = touch1.clientY - clickY;
    } else if (e.targetTouches.length == 2) {
        var touch1 = e.targetTouches[0];
        var touch2 = e.targetTouches[1];
        //var touch2 = {'clientX':0, 'clientY':0};

            var dist = getDistance({
                x: touch1.clientX,
                y: touch1.clientY
            }, {
                x: touch2.clientX,
                y: touch2.clientY
            });

            if (!lastDist) {
                lastDist = dist;
            }

            var newScale = scale * dist / lastDist;
            scale = newScale;
            context.translate(-destX, -destY);
            context.scale(scale, scale);
            context.translate(destX, destY);
            lastDist = dist;
        }
        draw();
    }, false);

function draw() {
    context.clearRect(0, 0, 360, 1024)
    context.drawImage(imageObj, destX, destY);
}