JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="my-picture"></div>
</body>

JavaScript

// create a canvas
// If the canvas is already a dom element
//var canvas = document.getElementById("canvas");

// otherwise you'd rather do
var canvas = document.createElement('canvas');

// Then set a width/height grab its context.
canvas.width = 900;
canvas.height = 400;
var ctx = canvas.getContext("2d");

// ... And do plenty of nice stuff with it.
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,900,400);

// When you want it to appear elsewhere.
var data = canvas.toDataURL();
var picture = document.getElementById("my-picture");
picture.innerHTML = '<img src="' + data + '"/>' ;