JSFiddle - React, Tailwind, and code Playground

by racha440

HTML

<canvas id="myCanvas" width="500" height="500" style="cursor:pointer; border:1px solid #000000;"></canvas>
<button id="clear">CLEAR</button>
<button id="clear">Add Rectangle</button>
<button id="clear">Add Circle</button>
<ul class="colorpicker">
  <li class="colors" id="red" code="#FF0000"><div>
  <li class="colors" id="blue" code="#0000FF"><div>
  <li class="colors" id="green" code="#00FF00"><div>
  <li class="colors" id="yellow" code="#FFFF00"><div>
</div>

CSS

#clear{
    cursor: pointer;
}
.colorpicker{
    list-style: none;
    margin:10px;
}
.colors{
    width: 50px;
    height: 50px;
    float: left;
    cursor:pointer;
}
#red{
    background-color: #FF0000;
}
#blue{
    background-color: #0000FF;
}
#green{
    background-color: #00FF00;
}
#yellow{
    background-color: #FFFF00;
}

JavaScript

$(document).ready(function(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var drawAllow = false;
    var colorcode = "#FF0000";
    $(document).bind('mousedown',function(e){
        drawAllow=true;
        ctx.beginPath();
        ctx.moveTo(e.pageX,e.pageY);
    });
    $(document).bind('mousemove',function(e){
        if(drawAllow){
            ctx.strokeStyle = colorcode;
            ctx.lineTo(e.pageX,e.pageY);
            ctx.stroke();
        }  
    });
    $(document).bind('mouseup',function(e){
        drawAllow=false;
    });
    $("#clear").bind('click',function(e){
		ctx.clearRect(0,0,500,500);
    });
     $(".colors").bind('click',function(e){
        colorcode =$(this).attr('code');
    });
});