JSFiddle - React, Tailwind, and code Playground

by Anurag Udasi

HTML

<span id = "color_picker_span" class = "action_items"> Color </span>
<span id = "clean_span" class = "action_items"> Clean </span>
<span id = "open_new_window_span" class = "action_items"> Open </span>
<span id = "fill_color" class = "action_items"> Fill </span>


<div id = "canvas_container" class = "canvas_container">
    <canvas id = "paint_canvas">
    </canvas>
</div>

CSS

.action_items
{
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid;
    border-bottom: none;
    margin-bottom: 0px;
    background-color: #00B2FF;
    padding: 2px;
    border-radius: 2px;
    cursor: pointer;
}

.canvas_container
{
    border: 1px solid;
    height: 300px;
    border-radius: 4px;
}

JavaScript

// DOM SETTINGS
var canvas_container = document.getElementById("canvas_container");
var canvas = document.getElementById("paint_canvas");
canvas.style.height = window.getComputedStyle(canvas_container).height;
canvas.style.width = window.getComputedStyle(canvas_container).width;

// CONTEXT SETTINGS
var context = canvas.getContext("2d");
context.strokeStyle = "pink";
context.lineWidth = 5;
context.lineCap = "round";

var mouse = {x: 0, y: 0};

canvas_container.onmousemove = function(event)
{
      mouse.x = event.pageX - canvas.offsetLeft;
      mouse.y = event.pageY - canvas.offsetTop;

};

var mousemovehandler = function(event)
{
    context.lineTo(mouse.x, mouse.y);
    context.stroke();
};

canvas_container.onmousedown = function(event)
{
    context.beginPath();
    canvas.onmousemove = mousemovehandler;
};

canvas_container.onmouseup = function(event)
{
    canvas.onmousemove = function() { };
};

document.getElementById("clean_span").onclick = function(event)
{
    context.clearRect(0, 0, canvas.width, canvas.height);
};

document.getElementById("open_new_window_span").onclick = function(event)
{
    window.open(canvas.toDataURL(), "NEW");
};

document.getElementById("fill_color").onclick = function(event)
{
    context.fillRect(0, 0, canvas.width, canvas.height);
};