JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/canvas-elements/build/cdn/canvas-elements.min.js"></script>
<canvas></canvas>

JavaScript

var canvas = document.getElementsByTagName('canvas')[0]; // Get the canvas element reference
var ctx = canvas.getContext('2d'); // Get context of the canvas

// Create a circle
var circle = new CanvasElements.Circle({
  x: 80,
  y: 80,
  r: 60,
  background: 'white',
  borderWidth: 4,
  borderColor: '#000',
  ctx: ctx
});

// Creates a blue rounded rectangle 
var text = new CanvasElements.Rect({
  x: 25,
  y: 63,
  r: 20,
  w: 110,
  h: 30,
  background: '#03a9f4',
  ctx: ctx
})

// Create 'Hello Canvas' text
var text = new CanvasElements.Text({
  x: 80,
  y: 80,
  background: '#ffffff',
  text: 'Hello Canvas',
  size: 16,
  align: 'center',
  baseline: 'middle',
  weight: '600',
  ctx: ctx
});