JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<div class="toolbar">    
    <div id="rad">
        Radius: 
        <span id="radVal">10</span>
        <div id="radPlus" class="button">+</div>
        <div id="radMinus" class="button">-</div>
    </div>
    <div id="palette"></div>
</div>
<canvas id="canvas">Your browser is unsupported!</canvas>

CSS

body{
    overflow:hidden;    
}

.toolbar{
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    cursor:context-menu;
    position:fixed;
    top:0;
    background-color:#2f2f2f;
    width:100%;
    color:white;
    font-family:Sans-Serif;
    padding:10px;
}

.button{
    margin-left:10px;
    display:inline-block;
    background-color:#4f4f4f;
    width:25px;
    height:20px;
    text-align:center;
    border-radius:5px;
    cursor:pointer;
}

.button:hover{
    background-color:#6f6f6f;
}

#rad{
    float:left;    
}

#palette{
    float:right;
    margin-right:20px;
}

.swatch{
    width:20px;
    height:20px;
    border-radius:30px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.5);    
    display:inline-block;
    margin-left:10px;
}

.swatch.active{
    border:1px solid white;
    box-shadow:inset 0 1px 2px  rgba(0,0,0,0.5);
}

JavaScript

var canvas  = document.getElementById("canvas");
var context = canvas.getContext("2d");

var plus = document.getElementById("radPlus"),
    minus = document.getElementById("radMinus"),
    val = document.getElementById("radVal");

var swatches = document.getElementsByClassName("swatch");
var colors = ['black', 'gray', 'white', 'violet', 'indigo', 'blue', 'green', 'yellow', 'orange', 'red'];

var radius  = 10;
var m_down  = false;

var pt = function(e){
    if(m_down){
        context.lineWidth=radius*2;
        context.lineTo(e.offsetX, e.offsetY);
        context.stroke();
        context.beginPath();
        context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
        context.fill();
        context.beginPath();
        context.moveTo(e.offsetX, e.offsetY);       
    }
}

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

document.body.style.margin = 0;

var down = function(e){
    m_down = true;
    pt(e);
}

var up = function(e){
    m_down = false;
    context.beginPath();
}

var incRad = function(e){
    if (radius == 100)
        return;
    radius++;
    val.innerHTML = radius;
}

var decRad = function(e){
    if (radius == 1)
        return;
    radius--
    val.innerHTML = radius;
}

var setColor = function(color){
    context.fillStyle = color;
    context.strokeStyle = color;
    var active = document.getElementsByClassName("active")[0];
    if (active)
        active.className="swatch";
}

var setSwatch = function(e){
    var swatch = e.target;
    setColor(swatch.style.backgroundColor);
    swatch.className+=" active";
}

canvas.addEventListener("mousedown", down);
canvas.addEventListener("mousemove", pt);
canvas.addEventListener("mouseup", up);

plus.addEventListener("mousedown", incRad);
minus.addEventListener("mousedown", decRad);

for(var i=0; i<colors.length; i++){
    var swatch = document.createElement("div");
    swatch.className="swatch";
    swatch.style.backgroundColor=colors[i];
   ...