JSFiddle - React, Tailwind, and code Playground

by Shashank Shekhar

HTML

<div class="picker"
       acp-color="#EFE9E7"
       acp-palette="#f44336|#e91e63|#9c27b0|#673ab7|#3f51b5|#2196f3|#03a9f4|#00bcd4|
     #009688|#4caf50|#8bc34a|#cddc39|#cddc39|#ffeb3b|#ffc107|#ff9800|#ff5722|#795548|#9e9e9e|#20707|#befe7ee|#9e9e9e|#9e9e5e|#9e4e9e">
  </div>

  <div class="right-block">
    <canvas id="paint-canvas" width="640" height="400"></canvas>
  </div>
  
  <div class="left-block">
    <canvas id="draw-canvas" width="980" height="400">
    
    </canvas>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/acolorpicker.js"></script>

JavaScript

var colors="#f44336";

AColorPicker.from('.picker')
    .on('change', (picker, color) => {
    console.log(color)
        colors= color;

    });



var canvas = document.getElementById("draw-canvas");
var context = canvas.getContext("2d");
var boundings = canvas.getBoundingClientRect();



document.onload = function () {
console.log('loaded')
    // Definitions


    // Specifications
    var mouseX = 0;
    var mouseY = 0;
    context.strokeStyle = 'black'; // initial brush color
    context.lineWidth = 1; // initial brush width
    var isDrawing = false;

    loadInput.addEventListener('change', (event) => this.load(event));

    // Handle Colors


    colors.addEventListener('click', function(event) {
        context.strokeStyle = event.target.value || 'black';
    });

    // Mouse Down Event
    canvas.addEventListener('mousedown', function(event) {
        setMouseCoordinates(event);
        isDrawing = true;

        // Start Drawing
        context.beginPath();
        context.moveTo(mouseX, mouseY);
    });

    // Mouse Move Event
    canvas.addEventListener('mousemove', function(event) {
        setMouseCoordinates(event);
        console.log(mouseX)
        if(isDrawing){
            context.lineTo(mouseX, mouseY);
            context.stroke();
        }
    });




    // Mouse Up Event
    canvas.addEventListener('mouseup', function(event) {
        setMouseCoordinates(event);
        isDrawing = false;
    });

    // Handle Mouse Coordinates
    function setMouseCoordinates(event) {
        mouseX = event.clientX - boundings.left;
        mouseY = event.clientY - boundings.top;
    }

};