Script to get an image (see selector) with rounded borders

image-with-rounded-border.js

(() => {
    function roundedImage(x, y, width, height, radius) {
      ctx.beginPath();
      ctx.moveTo(x + radius, y);
      ctx.lineTo(x + width - radius, y);
      ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
      ctx.lineTo(x + width, y + height - radius);
      ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
      ctx.lineTo(x + radius, y + height);
      ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
      ctx.lineTo(x, y + radius);
      ctx.quadraticCurveTo(x, y, x + radius, y);
      ctx.closePath();
    }

    const image = document.querySelector('.show-logo img');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const defaultWidth = 600;
    const borderRadius = 24;
    const scale = defaultWidth / image.width;

    canvas.width = defaultWidth;
    canvas.height = image.height * scale;

    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const img = new Image();
    img.setAttribute('crossorigin', 'anonymous');
    img.onload = () => {
        ctx.save();
        roundedImage(0, 0, defaultWidth, image.height * scale, borderRadius);
        ctx.clip();
        ctx.drawImage(img, 0, 0, defaultWidth, image.height * scale);
        ctx.restore();

        window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
    }
    img.src = image.src;
})();