JSFiddle - React, Tailwind, and code Playground

by pettys

HTML

<html>
<body>
    <canvas id="sig-canvas-canvas" width="200" height="125"></canvas>
    <img id="domImage" />
    <img id="jqueryImage" />
</body>
</html>

CSS

#sig-canvas-canvas { border: 1px solid black; }
img { width:200px; height: 125px; }
#domImage { border:1px solid purple; }
#jqueryImage { border:1px solid green; }

JavaScript

// draw something simple on a canvas
drawSomePicture();


// using DOM directly, copy canvas picture to the domImage
var domData = document.getElementById("sig-canvas-canvas").toDataURL("image/png");
document.getElementById('domImage').src = domData;


// using jQuery, copy canvas picture to the jqueryImage
var jqueryData = $("#sig-canvas-canvas").get(0).toDataURL("image/png");
$('#jqueryImage').attr('src', jqueryData);





function drawSomePicture() {
    var cvs = document.getElementById("sig-canvas-canvas");
    var ctx = cvs.getContext("2d");
    ctx.fillStyle = '#008';
    ctx.fillRect(50, 25, 75, 50);
    ctx.strokeStyle = '#080';
    ctx.lineWidth = 2;
    ctx.strokeRect(60, 65, 80, 20);
}