JSFiddle - React, Tailwind, and code Playground

by John Kiran

HTML

<html>
<head>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
</head>

<body>
<i class='fas fa-car-side'></i>
<canvas id="myCanvas" 
        width="200" 
        height="100"
        style="border:1px solid;">
</canvas>
<img id="scream" width="0" height="0"
src="https://www.gravatar.com/avatar/015289b1f1d893fb411235286114e9bb?s=64" alt="The Scream">
</body>
</html>

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,20,20);

var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0, 0);
ctx1.lineTo(200, 100);
ctx1.stroke();

var ctx2 = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx2.drawImage(img, 10, 10);