JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<canvas id="canvas" style="border:2px solid black;" width="223" height="223">
</canvas>

JavaScript

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

radians = function(degrees){
  return degrees/180 * Math.PI;
}

degrees = function(radians){
  return radians*180 / Math.PI;
}

var x = 0, y = 0, w = 100, h = 150;
var theta = 45;
var hyp = Math.sqrt(w*w + h*h);

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="'+hyp+'" height="'+hyp+'">'+
'<rect class="shape" x="0" y="0" width="'+w+'" height="'+h+'" transform="translate('+(hyp-w)/2+','+(hyp-h)/2+') rotate('+theta+','+w/2+','+h/2+')" fill="#006791"></rect></svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0, 223, 223);
  DOMURL.revokeObjectURL(url);
}

img.src = url;