JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<body>
<canvas id = "canvas" style = "border: 1px solid;" width = "480" height = "360"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
/*function drawRotatedImage(ctx, image, x, y, width, height, rotation){

      // Cache calculation for half width and height
      var halfWidth  = width  / 2;
      var halfHeight = height / 2;

      // Save canvas context state
      ctx.save();

      // Input transformation: translate to midpoint of image
      ctx.translate(x + halfWidth, y + halfHeight);

      // Input transformation: rotate by desired rotation
      ctx.rotate(rotation);

      // Draw the image
      ctx.drawImage(image, -halfWidth, -halfHeight, width, height);

      // Restore previous context state
      ctx.restore();
}*/
let img = new Image();
img.scr = "https://www.gannett-cdn.com/presto/2020/04/22/USAT/69ff341a-1586-4552-a58b-0d4167ff348e-AP_Trump_4.JPG?crop=3128,1760,x0,y0&width=3128&height=1760&format=pjpg&auto=webp";
ctx.rect(0, 0, 200, 200);
ctx.stroke();
ctx.drawImage(img, 0, 0, 1000, 1000, 0, 0, 200, 200);
//drawRotatedImage(ctx, img, 0, 0, 200, 200, 30);

</script>
</body>