JSFiddle - React, Tailwind, and code Playground

by Nashza

HTML

<div class="canv-wrapper">
  <canvas id="myCanvas" width="284px" height="120px">hello</canvas>
  <p>1 image 284px x 120px</p>
</div>
<div class="canv-wrapper">
  <canvas id="myCanvas2" style="width:284px;height:120px;"></canvas>
  <p>2 image 960px x 540px - Paint over image</p>
</div>
<img style="display:none;" src="https://wallpapercave.com/wp/wp4712331.jpg" id="dove">

CSS

.canv-wrapper {
  max-width: 49%;
  display:inline-block;
}

JavaScript

// CANVAS
//__________________________


 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.rect(0, 0, 284, 120);
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();
 var canvas2 = document.getElementById('myCanvas2');
      canvas2.width=960;
      canvas2.height=540;
      var context2 = canvas2.getContext('2d');
      context2.beginPath();
      context2.rect(0, 0, 960, 540);
      context2.lineWidth = 4;
      context2.strokeStyle = 'black';
      context2.stroke();
var img=document.getElementById("dove");
      context2.drawImage(img,0,0, canvas2.width, canvas2.height);
      context.drawImage(img,0,0, canvas.width, canvas.height);




// BRUSH PAINT OVER IMAGE 2
//__________________________

// Brush colour and size
const colour = "#3d34a5";
const strokeWidth = 25;

// Drawing state
let latestPoint;
let drawing = false;

// Set up our drawing context
//const canvas = document.getElementById("canvas");
//const context = canvas.getContext("2d");

let brush;

// Drawing functions

const continueStroke = newPoint => {
  context2.beginPath();
  context2.moveTo(latestPoint[0], latestPoint[1]);
  context2.strokeStyle = colour;
  context2.lineWidth = strokeWidth;
  context2.lineCap = "round";
  context2.lineJoin = "round";
  context2.lineTo(newPoint[0], newPoint[1]);
  context2.stroke();

  latestPoint = newPoint;
};

// Event helpers

const startStroke = point => {
  drawing = true;
  latestPoint = point;
};

const getTouchPoint = evt => {
  if (!evt.currentTarget) {
    return [0, 0];
  }
  const rect = evt.currentTarget.getBoundingClientRect();
  const touch = evt.targetTouches[0];
  return [touch.clientX - rect.left, touch.clientY - rect.top];
};

const BUTTON = 0b01;
const mouseButtonIsDown = buttons => (BUTTON & buttons) === BUTTON;

// Event handlers

const mouseMove = evt => {
  if (!drawing) {
    return;
  }
 ...