JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<canvas id="myCanvas" width="300" height="210" style="border:1px solid #d3d3d3">
Your browser does not support the HTML5 canvas tag.
</canvas>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/whatsapp/116/girl_1f467.png"  id="girl" alt="">
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var grad = ctx.createLinearGradient(0, 0, 170, 0);
grad.addColorStop("0", "magenta");
grad.addColorStop("1", "green");

ctx.strokeStyle = grad;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);
</script>