JSFiddle - React, Tailwind, and code Playground

by emanuelbsilva

HTML

<canvas width="1500" height="1500" id ="c"></canvas>

CSS

canvas {
  background: red;
}

JavaScript

function getAngledImageSize(a, x0, y0) {
  return {
    width: x0 * Math.cos(a) + y0 * Math.sin(a),
    height: x0 * Math.sin(a) + y0 * Math.cos(a)
  };
}


function getAngledImage({
  src,
  angle
}) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src = src;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      angle = angle * Math.PI / 180;

      var {
        width,
        height
      } = getAngledImageSize(angle, img.width, img.height)

      canvas.width = width;
      canvas.height = height;
      var ctx = canvas.getContext("2d");

      ctx.save();
      ctx.globalAlpha = 0.05
      ctx.translate(0, img.height / 2)
      ctx.rotate(-angle);
      ctx.translate(-(img.height * Math.sin(angle)) / 2, img.height / 2)
      ctx.drawImage(img, 0, 0);
      ctx.restore()
      resolve(canvas.toDataURL())
    }
  })
}

getAngledImage({
  src: "https://i.ibb.co/zPVQZtz/88347013-190726155567691-2877028661209333760-n.png",
  angle: 30
}).then((uri) => {
  var img = new Image();
  img.src = uri
  img.onload = function() {
    var canvas = document.getElementById("c")
    var ctx = canvas.getContext("2d");
    var pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height
    );
  };
})