JSFiddle - React, Tailwind, and code Playground

by cleaver

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<canvas width="200" height="200"></canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

$(function () {
    var $canvas = $('canvas'),
        canvas = $canvas.get(0),
        offset = $canvas.offset(),
        ctx,
        drawing = false,
        start = {
            x: null,
            y: null
        };
    
    function init() {
        if (canvas.getContext) {
            ctx = canvas.getContext('2d');
            
            ctx.lineJoin = 'round';
 			ctx.lineCap = 'round';
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 5;
        }
    }
    
    function startDrawing(e) {
        var oe = e.originalEvent || e;
        
        e.preventDefault();
        
        drawing = true;
        
        start.x = Math.floor(oe.pageX - offset.left);
        start.y = Math.floor(oe.pageX - offset.left);
    }
    
    function continueDrawing(e) {
        e.preventDefault();
        
        if (!drawing) {
            return;
        }
        
        clearCanvas();
        drawCircle(e);
    }
    
    function endDrawing(e) {
        e.preventDefault();
        drawing = false;
    }
    
    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function drawCircle(e) {
        var oe = e.originalEvent || e;
        
        ctx.beginPath();
        var r = oe.pageX - start.x - offset.left;
        console.log(r);
        ctx.arc(start.x + r, start.y + 10 + r, r, 0, 2 * Math.PI, false);
        //ctx.arc(start.x, start.y, oe.pageX - start.x - offset.left, 0, 2 * Math.PI, false);
        ctx.stroke();
        ctx.closePath();
    }
    
    $canvas.on('touchstart mousedown', function (e) {
        startDrawing(e);
    });
    
    $canvas.on('touchmove mousemove', function (e) {
        continueDrawing(e);
    });
    
    $canvas.on('touchend mouseup', function (e) {
        endDrawing(e);
    });
    
    init();
});