JSFiddle - React, Tailwind, and code Playground

by gamealchemist

HTML

<body>
    <div id="controls">
        <button id="zoomIn">Zoom In</button>
        <button id="zoomOut">Zoom Out</button>
        <button id="clear">Clear</button>
    </div>
    <canvas id="paintCanvas"></canvas>
</body>

CSS

canvas {
    background-color: #CECECE;
}
html, body {
    background-color: #FFFFFF;
}
pre {
    background: #eee;
    width: 200px;
    height: 50px;
}

JavaScript

$(document).ready(function () {
    var canvas = document.getElementById("paintCanvas"),
        paintContext = paintCanvas.getContext("2d"),
        currentPathIndex = 0,
        draw = false,
        paths = [],
        scale = 1,
        scaleStep = 0.25,
        styles = {
            lineWidth: 10,
            strokeStyle: "#000000"
        };

    paintContext.imageSmoothingEnabled = false;
    paintContext.mozImageSmoothingEnabled=false;
    paintContext.webkitImageSmoothingEnabled=false;
    var cvSize = 500;

    var drawCanvas = document.createElement('canvas');
    var drawCtx = drawCanvas.getContext('2d');

    drawCanvas.width = drawCanvas.height = cvSize;
    canvas.width = canvas.height = cvSize;

    var context = drawCtx;

    function updatePaintCanvas() {
            paintContext.clearRect(0, 0, paintContext.canvas.width, paintContext.canvas.height); 
        paintContext.save();
        paintContext.translate(cvSize*0.5, cvSize*0.5);
        paintContext.scale(scale, scale);
        paintContext.drawImage(drawCanvas, -cvSize*0.5, -cvSize*0.5);
        paintContext.restore();
    }


    var canvasRect = canvas.getBoundingClientRect();
    var mouse = {
        x: 0,
        y: 0
    };

    function getCoords(e) {
        mouse.x = e.clientX || e.pageX || 0;
        mouse.y = e.clientY || e.pageY || 0;
        mouse.x -= canvasRect.left;
        mouse.y -= canvasRect.top;
        mouse.x = cvSize*0.5 + (mouse.x - cvSize*0.5)/scale;
        mouse.y = cvSize*0.5 + (mouse.y - cvSize*0.5)/scale;
    }

    function applyStyles(context, styles) {
        for (var style in styles)
        context[style] = styles[style];
    };

    function reDrawHistory() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        context.save();
        applyStyles(context, styles);
        scaleFromCenter(context, scale);
        for (var i = 0; i < paths.length; i++) {
            context.beginPath();
           ...