JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>
<button id="submitGraphic">Click</button>

JavaScript

var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;

context.fillStyle = "rgb(255,255,0)";
context.fillRect(0,0,800,600);

context.fillStyle = "rgb(255,0,0)";
context.fillRect(0,0,640,480);



$("#submitGraphic").click( function(){
    var canvas = document.getElementsByTagName("canvas");
    // canvas context
    var context = canvas[0].getContext("2d");
    // get the current ImageData for the canvas
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height);
    // store the current globalCompositeOperation
    var compositeOperation = context.globalCompositeOperation;
    // set to draw behind current content
    context.globalCompositeOperation = "destination-over";
    //set background color
    context.fillStyle = "#FFFFFF";
    // draw background/rectangle on entire canvas
    context.fillRect(0,0,canvas[0].width,canvas[0].height);

    var tempCanvas = document.createElement("canvas"),
        tCtx = tempCanvas.getContext("2d");
    
    tempCanvas.width = 640;
    tempCanvas.height = 480;
    
    tCtx.drawImage(canvas[0],0,0);
    
    // write on screen
    var img = tempCanvas.toDataURL("image/png");
    document.write('<a href="'+img+'"><img src="'+img+'"/></a>');
})