JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sketch">
<canvas id="paint" width="700" height="700"></canvas>
</div>

<h2>Painting Editor</h2>

<br />

<div align="center">
<label>Line <input type="radio" name="Shape" value="Line" id="Line" checked /> </label>
<label>Rectangle <input type="radio" name="Shape" value="Rectangle" id="Rectangle" /> </label>
<label>Circle <input type="radio" name="Shape" value="Circle" id="Circle" /> </label>

JavaScript

var canvas = document.querySelector('#paint');
    var context = canvas.getContext('2d');

    var sketch = document.querySelector('#sketch');
    var sketch_style = getComputedStyle(sketch);

    // Pase into integer of Canvas size
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height'));


    // Creating a tmp canvas
    var tmp_canvas = document.createElement('canvas');
    var tmp_context = tmp_canvas.getContext('2d');
    tmp_canvas.id = 'tmp_canvas';
    tmp_canvas.width = canvas.width;
    tmp_canvas.height = canvas.height;

    sketch.appendChild(tmp_canvas);

    // Mouse Position Setting
    var mouse = { x: 0, y: 0 };
    var last_mouse = { x: 0, y: 0 };

    /* Drawing on Paint*/
    tmp_context.lineWidth = 4;
    tmp_context.lineJoin = 'round';
    tmp_context.lineCap = 'round';
    tmp_context.strokeStyle = 'Red';
    tmp_context.fillStyle = 'Red';


    var shape = 'Line';

function draw() {
    // Tmp canvas is always cleared up before drawing.
    tmp_context.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);

    switch(shape) {
        case 'Line': onLine(); break;
        case 'Rectangle': onRect(); break;
        case 'Circle': onCircle(); break;
    }
}

    document.querySelector('#Line').onchange = function () {
        if (this.checked)
            shape = 'Line';

        tmp_canvas.style.display = 'block';
    }

    /* Mouse Capturing Work */
    tmp_canvas.addEventListener('mousemove', function (e) {
        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;
    });

    tmp_canvas.addEventListener('mousedown', function (e) {
        tmp_canvas.addEventListener('mousemove', draw);

        mouse.x = typeof e.offsetX === 'undefined' ? e.offsetX : e.layerX;
        mouse.y = typeof e.offsetY === 'undefined' ? e.offsetY : e.layerY;

        last_mouse.x =...