JSFiddle - React, Tailwind, and code Playground

by LimitedWard

HTML

<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero aliquid consectetur praesentium quos perferendis impedit non totam cumque porro temporibus accusantium aspernatur ratione? Quisquam tenetur voluptates molestiae amet itaque similique.
    <canvas height="345" width="512" id="myCanvas"></canvas>
</div>
<button id="save">Save</button>
<div id="result"></div>

CSS

#myCanvas {
    height:690px;
    width:1024px;
    position:absolute;
    top:0;
    left:0;
}
#content {
    position:relative;
    height:690px;
    width:1024px;
    padding:10px;
    border:1px solid black;
    box-sizing:border-box;
    font-family:arial;
}

JavaScript

var ctx = document.getElementById("myCanvas").getContext('2d');
if (typeof(Storage) != "undefined") {
    // Retrieve
    document.getElementById("result").innerHTML = '<img src="' + localStorage.getItem("image") + '">';
    var img = new Image;
    img.src = localStorage.getItem("image");
    img.onload = function(){
        ctx.drawImage(img,0,0);
    }
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
$('#myCanvas').bind("contextmenu",function(){
       return false;
    });
$('#myCanvas').mousedown(function(e){
    var parentOffset = $(this).offset();
    var oldX = e.pageX - parentOffset.left;
    var oldY = e.pageY - parentOffset.top;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    if (e.button === 2)
    {
        ctx.globalCompositeOperation = "destination-out";
        ctx.strokeStyle = "rgba(0,0,0,1)";
        ctx.lineWidth = 25;
    }
    else
    {
        ctx.globalCompositeOperation = "source-over";
        ctx.strokeStyle = "#FF0000";
        ctx.lineWidth = 2;
    }
    var mouse = {x: oldX, y: oldY};
    var last_mouse = {x: oldX, y: oldY};
    $('#myCanvas').mousemove(function(event){
        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;
        mouse.x = event.pageX - parentOffset.left;
        mouse.y = event.pageY - parentOffset.top;
        ctx.beginPath();
        ctx.moveTo(last_mouse.x/2, last_mouse.y/2);
        ctx.lineTo(mouse.x/2, mouse.y/2);
        ctx.closePath();
        ctx.stroke();
    });
});
$('#myCanvas').mouseup(function() {
    $('#myCanvas').unbind('mousemove');
});

$("#myCanvas").bind('touchstart', function(){
    var parentOffset = $(this).offset();
    var oldX = e.pageX - parentOffset.left;
    var oldY = e.pageY - parentOffset.top;
    ctx.moveTo(oldX,oldY);
    ctx.lineCap = 'round';
    ctx.lineWidth = 5;
    ctx.lineJoin = 'round';
    ctx.fillStyle = "#FF0000";
    ctx.strokeStyle = "#FF0000";
   ...