Greasy Fork

The script works but need some fixes:

• Change the detection of the path "/draw" for a regular expression (line 39):

const pattern = /\/([a-zA-Z]*)\/draw/g;
if (location.pathname.match(pattern)) {
  // code...
}

• Handle centering and aspect ratio by changing the onload function (line 93):

img.onload = function() {
  var x, y = 0;
  var wRatio, hRatio = 0;
  var width = canvas.width;
  var height = canvas.height;

  //Aspect ratio
  if (img.width > canvas.width || img.height > canvas.height) {
    wRatio = img.width / canvas.width;
    hRatio = img.height / canvas.height;
    if (wRatio > hRatio) {
      width = canvas.width;
      height = img.height / wRatio;
    } else {
      height = canvas.height;
      width = img.width / hRatio;
    }
  } else {
    width = img.width;
    height = img.height;
  }
  //Center
  x = (canvas.width - width) / 2;
  y = (canvas.height - height) / 2;

  //Draw
  context.drawImage(this, x, y, width, height);
}