JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="test_canvas" style="background-color : #FFFF00" ; width="500px"
; height="340px"></canvas>
<br>
<button id="test_put_btn">Put an image</button>
<br>
<button id="save_dataURL">Save to dataURL</button>
<br>
<button id="draw_back">Final step: draw 3 images back.</button>
<br>
<img id="first_img"; width="100px" ; height="100px" ;></img>
<img id="second_img"; width="100px" ; height="100px" ></img>
<img id="third_img"; width="100px" ; height="100px" ;></img>

JavaScript

var drawing_plate;
var context;
var dataURL_arr = new Array();
$(document).ready(function () {
    drawing_plate = document.getElementById("test_canvas");
    context = drawing_plate.getContext('2d');


    $("#test_canvas").bind("mousedown", Touch_Start);
    $("#test_canvas").bind("mousemove", Touch_Move);
    $("#test_canvas").bind("mouseup", Touch_End);


}); //document ready. 



function Touch_Start(event) {
    event.preventDefault();
    touch = event;
    touch_x = touch.pageX;
    touch_y = touch.pageY;

    line_start_x = touch.pageX - 0;
    line_start_y = touch.pageY - 0;

    context.beginPath();
    context.moveTo(line_start_x, line_start_y);
}

function Touch_Move(event) {
    event.preventDefault();
    touch = event; //mouse
    line_end_x = touch.pageX - 0;
    line_end_y = touch.pageY - 0;
    context.lineTo(line_end_x, line_end_y);
    context.stroke();
}


$("#test_put_btn").click(function () {
    var test_img = new Image();
    test_img.src =...