JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<br>
<br>
<br>

<div id="myCoordinate"> 

</div>


<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

JavaScript

var coor = [];

function updateTextArea(){
	
    
   console.log("click");
    document.getElementById('myCoordinate').innerHTML = "";
     coor.forEach(function(c, i){
    	console.log(c);
        document.getElementById('myCoordinate').innerHTML += c.x.toString() + ", " +  c.y.toString() + "<br>";

    });
};

function drawLine(x,y){
	  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
    context.lineTo(x,y);
    context.stroke();
    	
};

//updateTextArea();


function writeMessage(canvas, message) {
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

  canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    //writeMessage(canvas, message);
  }, false);

      canvas.addEventListener('click', function(evt) {
      var mousePos = getMousePos(canvas, evt);
        coor.push({x: mousePos.x, y: mousePos.y});
        updateTextArea();
        drawLine(mousePos.x, mousePos.y);
      }, false);