JSFiddle - React, Tailwind, and code Playground

by RomainMazB

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var rectWidth = 150;
      var rectHeight = 75;

      // translate context to center of canvas
      context.translate(canvas.width / 2, canvas.height / 2);

      // rotate 45 degrees clockwise
      context.rotate(Math.PI / 4);

      context.fillStyle = 'blue';
      context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);