JSFiddle - React, Tailwind, and code Playground

by Shashank Shekhar

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Pixorize!</title>
   
  </head>
  <body>

  <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>

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


  </body>


</html>

CSS

.picker {
    float: left;
    display: inline-block;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(3, 1, 1, 0.08);
}

.buttons {
    height: 80px;
    padding-top: 10px;
}

.right-block {
    width: 800px;
    border: 1px solid #e0e0e0;
    float: left;

}

#paint-canvas {
    cursor:crosshair;
}

JavaScript

var colors="#f44336";

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

    });



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

        
window.onload = function () {

    // Definitions


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

   
    // 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);

        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;
    }


};