JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='c' width='100' height='100'></canvas>

CSS

canvas{
  background: repeating-linear-gradient(45deg, #ccc 0 20px, #999 20px 40px);
}

JavaScript

const ctx = document.getElementById("c").getContext("2d")

ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 100, 100)

ctx.globalCompositeOperation = 'hue';
ctx.fillStyle = "#0f0";
ctx.fillRect(0, 0, 100, 100)