JSFiddle - React, Tailwind, and code Playground

by softvar

HTML

<body>
    <canvas width=200 height=200 id="thecanvas"></canvas>
    <div><button id="bt_draw">Draw to Image</button></div>
    <div><button id="bt_download">Download Image</button></div>
    <image id="theimage"></image>
</body>

JavaScript

var canvas = document.getElementById("thecanvas");

function draw(){
    var canvas = document.getElementById("thecanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
    ctx.fillRect(25,25,100,100); 
    ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
    ctx.fillRect(58, 74, 125, 100);
}

function to_image(){
    document.getElementById("theimage").src = canvas.toDataURL();
}

function download_image(){
    //Canvas2Image.saveAsPNG(canvas);
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
    window.location.href=image;
}

document.getElementById('bt_draw').onclick = to_image
document.getElementById('bt_download').onclick = download_image

draw()