JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="400" 
style="border:1px solid black;">
Sorry, your browser does not support the HTML5 canvas tag.
</canvas>

JavaScript

"use strict";
/* jshint browser: true, devel: true, globalstrict: true */

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.font="30px Arial";
var gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillText("Hello Canvas World!", 30, 30);

// We can define an arbitrary path, made of multiple pieces, which 
// we finally draw by using the `stroke` or `fill` commands...
ctx.beginPath();
ctx.moveTo( 30, 100);
ctx.lineTo(300, 200);
ctx.lineTo(250, 120);
ctx.lineTo( 30, 100); // could have done ctx.closePath() here
ctx.fill();

ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(150, 300);
ctx.lineTo(200, 250);
ctx.closePath();

ctx.moveTo(300, 300);
ctx.arc(300, 300, 50, 0, 1.5 * Math.PI);

ctx.fill();
ctx.lineWidth = 5;
ctx.stroke();