JSFiddle - React, Tailwind, and code Playground

by Shawn Allen

HTML

<canvas width="300" height="300"></canvas>

CSS

canvas {
    border: 1px solid #eee;
}

JavaScript

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d");

context.fillStyle = "blue";
// both of these rectangles will be blue
context.fillRect(0, 0, 100, 100);
context.fillRect(100, 100, 100, 100);

// tell context to remember "blue"
context.save();
context.fillStyle = "rgba(255,0,255,.8)";
context.fillRect(30, 30, 140, 140);
context.restore();
// now context.fill === "blue"

context.fillRect(60, 60, 80, 80);