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
		
	
      

      // 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 =...