JSFiddle - React, Tailwind, and code Playground

by Stallman41

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 = "http://careerscdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png";
    context.drawImage(test_img, 0, 0);
});

$("#save_dataURL").click(function () {

    dataURL_arr.push(drawing_plate.toDataURL("image/png"));
    alert(dataURL_arr[0]);


});
$("#draw_back").click(function () {
    var tmp_img= new Image();
    
    document.getElementsById("first_img")[0].src = document.getElementsByTagName("canvas")[0].toDataURL();
    /*
    $("#second_img").src = dataURL_arr[1];
    }
    $("#second_img").src = dataURL_arr[1];
    
    $("#third_img").src = dataURL_arr[2];
    }
    $("#third_img").src = dataURL_arr[2];
    */
});