JSFiddle - React, Tailwind, and code Playground

by Lien Z

JavaScript

var canvas = document.createElement("canvas"),
    easel  = canvas.getContext("2d");

easel.fillStyle = "rgb(80, 80, 120)";
easel.strokeStyle = "rgb(120, 120, 200)";

easel.fillRect(x, y, width, height);
easel.strokeRect(x, y, width, height);

easel.save();  // stores ALL current status properties in the stack

// radians
easel.rotate(degrees * Math.PI / 180);
// any new coordinates/dimensions will now be multiplied by these
easel.scale(scale_X, scale_Y);
// new origin coordinates, based on rotated orientation, multiplied by the scale-factor
easel.translate(new_X, new_Y); 

easel.fillStyle = "gold";
easel.fillRect(x, y, width, height); // completely new rectangle
// origin is different, and the rotation is different, because you're in a new coordinate space

easel.clearRect(0, 0, width, height); // not even guaranteed to clear the actual canvas, anymore
easel.strokeRect(width/2, height/2, width, height); // still in the new coordinate space, still with the new colour


easel.restore(); // reassign all of the previous status properties
easel.clearRect(0, 0, width, height);