JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<canvas id="canvas" width=300 height=300></canvas>
    <img id="toImage" width=300 height=300>

CSS

body{ background-color: ivory; }
    canvas{border:1px solid red;}

JavaScript

$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.fillRect(50,50,150,75);


    var theImage=document.getElementById("toImage");
    theImage.src=canvas.toDataURL();

}); // end $(function(){});