JSFiddle - React, Tailwind, and code Playground

by ngoctuan001

HTML

<br/>Drag to draw on the map image</br>
<p id="text">

</p>
<canvas id="canvas" width=576 height=307></canvas>

CSS

body{ background-color: ivory; }
        canvas{border:1px solid red;}

JavaScript

var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var lastX;
        var lastY;
        var strokeColor="red";
        var strokeWidth=2;
        var canMouseX;
        var canMouseY;
        var canvasOffset=$("#canvas").offset();
        var offsetX=canvasOffset.left;
        var offsetY=canvasOffset.top;
        var isMouseDown=false;
        var imageObj=new Image();
        imageObj.onload=function(){
            ctx.save();
            ctx.globalAlpha=.3;
            ctx.drawImage(this,0,0,canvas.width,canvas.height);
            ctx.restore();
            
            let data = canvas.toDataURL();
          	$("#text").html(data);
        }
        imageObj.src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687";
        
        
        function handleMouseDown(e){
          canMouseX=parseInt(e.clientX-offsetX);
          canMouseY=parseInt(e.clientY-offsetY);
          $("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);

          // Put your mousedown stuff here
          lastX=canMouseX;
          lastY=canMouseY;
          isMouseDown=true;
        }

        function handleMouseUp(e){
          canMouseX=parseInt(e.clientX-offsetX);
          canMouseY=parseInt(e.clientY-offsetY);
          $("#uplog").html("Up: "+ canMouseX + " / " + canMouseY);

          // Put your mouseup stuff here
          isMouseDown=false;
        }

        function handleMouseOut(e){
          canMouseX=parseInt(e.clientX-offsetX);
          canMouseY=parseInt(e.clientY-offsetY);
          $("#outlog").html("Out: "+ canMouseX + " / " + canMouseY);

          // Put your mouseOut stuff here
          isMouseDown=false;
    

        }

        function handleMouseMove(e){
          canMouseX=parseInt(e.clientX-offsetX);
          canMouseY=parseInt(e.clientY-offsetY);
          $("#movelog").html("Move: "+ canMouseX + " / " +...