JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div style="position:absolute;top:30px;z-index:102;">
        <canvas id="canvas" width="1386" height="747" style="position:absolute;"></canvas>
    </div>
    <div style="position:absolute; top:30px;" id="debugText">Debug</div>
    <div style="position:absolute;top:30px; visibility: hidden;">
        <canvas id="debugCanvas" width="1386" height="747"></canvas>
    </div>
    <div style="position:absolute; left: 200px;z-index:99;" id="debugContols">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onClick="javascript:zoomIn(0, 0, 0.5);">Zoom 0.5</a><a href="#" onClick="javascript:zoomIn(0, 0, 2);">Zoom 2</a><a href="#" onClick="javascript:zoomIn(0, 0, 3);">Zoom 3</a>
    </div>
</div>

JavaScript

var canvas = document.getElementById("canvas");
var debugCanvas = document.getElementById("debugCanvas");
var ctx = canvas.getContext("2d");
var ctxDebug = debugCanvas.getContext("2d");
var context = ctx;
var scale = 1;
var originx = 0;
var originy = 0;

function draw() {
    // plne/Straen
    ctx.clearRect(0, 0, 7386, 747);



    // plne/Straen/Compound Path

    ctx.beginPath();

    // plne/Straen/Compound Path/Path
    ctx.moveTo(242.4, 470.5);
    ctx.lineTo(242.8, 469.4);
    ctx.lineTo(248.6, 468.9);
    ctx.lineTo(258.7, 469.4);
    ctx.lineTo(276.5, 468.2);
    ctx.lineTo(277.8, 468.0);
    ctx.lineTo(278.8, 467.5);
    ctx.lineTo(279.9, 466.4);
    ctx.lineTo(280.6, 464.9);
    ctx.lineTo(280.7, 463.3);
    ctx.lineTo(280.6, 462.2);
    ctx.lineTo(280.2, 461.1);
    ctx.lineTo(279.5, 460.1);
    ctx.lineTo(278.4, 459.3);
    ctx.lineTo(277.2, 458.9);
    ctx.lineTo(276.1, 458.9);
    ctx.lineTo(275.1, 458.9);
    ctx.lineTo(265.9, 459.5);
    ctx.lineTo(251.4, 460.6);
    ctx.lineTo(239.9, 461.5);
    ctx.lineTo(216.9, 463.1);
    ctx.lineTo(216.7, 472.3);
    ctx.lineTo(239.5, 470.8);
    ctx.lineTo(242.4, 470.5);
    ctx.closePath();

    // plne/Straen/Compound Path/Path
    ctx.moveTo(239.0, 464.8);
    ctx.lineTo(250.8, 463.9);
    ctx.lineTo(265.7, 462.7);
    ctx.lineTo(275.2, 462.1);
    ctx.lineTo(275.4, 462.1);
    ctx.lineTo(275.6, 462.2);
    ctx.lineTo(275.7, 462.4);
    ctx.lineTo(275.8, 462.6);
    ctx.lineTo(275.8, 462.9);
    ctx.lineTo(275.8, 463.2);
    ctx.lineTo(275.9, 463.5);
    ctx.lineTo(275.9, 463.9);
    ctx.lineTo(275.9, 464.3);
    ctx.lineTo(275.9, 464.7);
    ctx.lineTo(275.8, 464.9);
    ctx.lineTo(275.5, 465.1);
    ctx.lineTo(258.8, 466.3);
    ctx.lineTo(248.8, 467.0);
    ctx.lineTo(242.9, 467.5);
    ctx.lineTo(242.3, 467.5);
    ctx.lineTo(239.4, 467.7);
    ctx.lineTo(239.0, 464.8);
    ctx.closePath();
    ctx.fillStyle = "rgb(228, 229, 230)";
    ctx.fill();

    // plne/Straen/Group

    //...