JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="200" height="200"></canvas>

CSS

canvas {
    border:1px solid #aaa;
}

JavaScript

var deg2rad = function(deg) {
 return Math.PI * deg / 180; 
}

var drawOrigin = function(ctx) {
 ctx.beginPath();
 ctx.arc(0, 0, 5, 0, 2 * Math.PI, false);
 ctx.fillStyle = 'green';
 ctx.fill();    
}

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

// un rectangle de 100 par 50 aux coordonnées 10, 10 avec une rotation de 45° depuis son coin supérieur gauche
ctx.save();
ctx.fillStyle = 'yellow';
ctx.translate(10, 10);
ctx.rotate(deg2rad(45));
ctx.beginPath();
ctx.rect(0, 0, 100, 50);
ctx.fill();
drawOrigin(ctx);
ctx.restore();

// un rectangle de 100 par 50 aux coordonnées 100, 100 (le centre) avec une rotation de 45° depuis son centre
ctx.save();
ctx.fillStyle = 'red';
ctx.translate(100, 100);
ctx.rotate(deg2rad(90));
ctx.beginPath();
ctx.rect(-50, -25, 100, 50);
ctx.fill();
drawOrigin(ctx);
ctx.restore();