@needle-tools/engine 4.11.3 → 4.11.4-next.a568de7

package/src/engine/engine_context.ts

@@ -129,9 +129,12 @@ export function registerComponent(script: IComponent, context?: Context) {
 }
 
 /**
- * The context is the main object that holds all the data and state of the Needle Engine.  
- * It can be used to access the scene, renderer, camera, input, physics, networking, and more.
- * @example
+ * The Needle Engine context is the main access point that holds all the data and state of a Needle Engine application. 
+ * It can be used to access the {@link Context.scene}, {@link Context.renderer}, {@link Context.mainCamera}, {@link Context.input}, {@link Context.physics}, {@link Context.time}, {@link Context.connection} (networking), and more.
+ * 
+ * The context is automatically created when using the `<needle-engine>` web component.  
+ * 
+ * @example Accessing the context from a [component](https://engine.needle.tools/docs/api/Behaviour):
  * ```typescript
  * import { Behaviour } from "@needle-tools/engine";
  * import { Mesh, BoxGeometry, MeshBasicMaterial } from "three";
@@ -142,6 +145,18 @@ export function registerComponent(script: IComponent, context?: Context) {
  *   }
  * }
  * ```
+ * 
+ * @example Accessing the context from a [hook](https://engine.needle.tools/docs/scripting.html#hooks) without a component e.g. from a javascript module or svelte or react component.
+ * 
+ * ```typescript
+ * import { onStart } from "@needle-tools/engine";
+ * 
+ * onStart((context) => {
+ *   console.log("Hello from onStart hook");
+ *   context.scene.add(new Mesh(new BoxGeometry(), new MeshBasicMaterial()));
+ * });
+ * ```
+ * 
  */
 export class Context implements IContext {
 

package/src/engine/engine_utils.ts

@@ -3,11 +3,9 @@ import { Quaternion, Vector2, Vector3, Vector4 } from "three";
 
 declare type Vector = Vector2 | Vector3 | Vector4 | Quaternion;
 
-import { needleLogoOnlySVG } from "./assets/index.js";
 import type { Context } from "./engine_context.js";
 import { ContextRegistry } from "./engine_context_registry.js";
 import { type SourceIdentifier } from "./engine_types.js";
-import type { NeedleEngineWebComponent } from "./webcomponents/needle-engine.js";
 
 // https://schneidenbach.gitbooks.io/typescript-cookbook/content/nameof-operator.html
 /** @internal */
@@ -899,230 +897,3 @@ export async function PromiseAllWithErrors<T>(promise: Promise<T>[]): Promise<{
 
 
 
-
-
-/** Generates a QR code HTML image using https://github.com/davidshimjs/qrcodejs
- * @param args.text The text to encode
- * @param args.width The width of the QR code
- * @param args.height The height of the QR code
- * @param args.colorDark The color of the dark squares
- * @param args.colorLight The color of the light squares
- * @param args.correctLevel The error correction level to use
- * @param args.showLogo If true, the same logo as for the Needle loading screen will be drawn in the center of the QR code
- * @param args.showUrl If true, the URL will be shown below the QR code
- * @param args.domElement The dom element to append the QR code to. If not provided a new div will be created and returned
- * @returns The dom element containing the QR code
- */
-export async function generateQRCode(args: { domElement?: HTMLElement, text: string, width?: number, height?: number, colorDark?: string, colorLight?: string, correctLevel?: any, showLogo?: boolean, showUrl?: boolean }): Promise<HTMLElement> {
-
-    // Ensure that the QRCode library is loaded
-    if (!globalThis["QRCode"]) {
-        const url = "https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@gh-pages/qrcode.min.js";
-        let script = document.head.querySelector(`script[src="${url}"]`) as HTMLScriptElement;
-        if (!script) {
-            script = document.createElement("script");
-            script.src = url;
-            document.head.appendChild(script);
-        }
-
-        await new Promise((resolve, _reject) => {
-            script.addEventListener("load", () => {
-                resolve(true);
-            });
-        });
-    }
-
-    const QRCODE = globalThis["QRCode"];
-    const target = args.domElement ?? document.createElement("div");
-    const qrCode = new QRCODE(target, {
-        width: args.width ?? 256,
-        height: args.height ?? 256,
-        colorDark: "#000000",
-        colorLight: "#ffffff",
-        correctLevel: args.showLogo ? QRCODE.CorrectionLevel.H : QRCODE.CorrectLevel.M,
-        ...args,
-    });
-
-    // Number of rows/columns of the generated QR code
-    const moduleCount = qrCode?._oQRCode.moduleCount || 0;
-    const canvas = qrCode?._oDrawing?._elCanvas as HTMLCanvasElement;
-    
-    let sizePercentage = 0.25;
-    if (moduleCount < 40)
-        sizePercentage = Math.floor(moduleCount / 4) / moduleCount;
-    else
-        sizePercentage = Math.floor(moduleCount / 6) / moduleCount;
-    
-    const paddingPercentage = Math.floor(moduleCount / 20) / moduleCount;
-    try {
-        const img = await addOverlays(canvas, { showLogo: args.showLogo, logoSize: sizePercentage, logoPadding: paddingPercentage }).catch(_e => { /** ignore */ });
-        if (img) {
-            target.innerHTML = "";
-            target.append(img);
-        }
-    }
-    catch { } // Ignore
-
-    if (args.showUrl !== false && args.text) {
-        // Add link label below the QR code
-        // Clean up the text. If it's a URL: remove the protocol, www. part, trailing slashes or trailing question marks
-        const existingLabel = target.querySelector(".qr-code-link-label");
-        let displayText = args.text.replace(/^(https?:\/\/)?(www\.)?/, "").replace(/\/+$/, "").replace(/\?+$/, "");
-        displayText = "Scan to visit " + displayText;
-        if (existingLabel) {
-            existingLabel.textContent = displayText;
-        } else {
-            // Create a new label
-            const linkLabel = document.createElement("div");
-            linkLabel.classList.add("qr-code-link-label");
-            args.text = displayText;
-            linkLabel.textContent = args.text;
-            linkLabel.addEventListener("click", (ev) => {
-                // Prevent the QR panel from closing
-                ev.stopImmediatePropagation();
-            });
-
-            linkLabel.style.textAlign = "center";
-            linkLabel.style.fontSize = "0.8em";
-            linkLabel.style.marginTop = "0.1em";
-            linkLabel.style.color = "#000000";
-            linkLabel.style.fontFamily = "'Roboto Flex', sans-serif";
-            linkLabel.style.opacity = "0.5";
-            linkLabel.style.wordBreak = "break-all";
-            linkLabel.style.wordWrap = "break-word";
-            linkLabel.style.marginBottom = "0.3em";
-
-            // Ensure max. width
-            target.style.width = "calc(210px + 20px)";
-
-            target.appendChild(linkLabel);
-        }
-    }
-
-    return target;
-}
-
-async function addOverlays(canvas: HTMLCanvasElement, args: { showLogo?: boolean, logoSize?: number, logoPadding?: number }): Promise<HTMLImageElement | void> {
-    if (!canvas) return;
-
-    // Internal settings
-    const canvasPadding = 8;
-    const shadowBlur = 20;
-    const rectanglePadding = args.logoPadding || 1. / 32;
-    // With dropshadow under the logo
-    /*
-    const shadowColor = "#00000099";
-    const rectangleRadius = 0.4 * 16;
-    */
-    // Without dropshadow under the logo
-    const shadowColor = "transparent";
-    const rectangleRadius = 0;
-
-    // Draw the website's icon in the center of the QR code
-    const faviconImage = new Image();
-    const element = document.querySelector("needle-engine") as NeedleEngineWebComponent;
-    const logoSrc = element?.getAttribute("loading-logo-src") || needleLogoOnlySVG;
-    if (!logoSrc) return;
-
-    let haveLogo = false;
-    if (args.showLogo !== false) {
-        faviconImage.src = logoSrc;
-        haveLogo = await new Promise((resolve, _reject) => {
-            faviconImage.onload = () => resolve(true);
-            faviconImage.onerror = (err) => {
-                console.error("Error loading favicon image for QR code", err);
-                resolve(false);
-            };
-        });
-    }
-
-    // Add some padding around the canvas – we need to copy the QR code image to a larger canvas
-    const paddedCanvas = document.createElement("canvas");
-    paddedCanvas.width = canvas.width + canvasPadding;
-    paddedCanvas.height = canvas.height + canvasPadding;
-    const paddedContext = paddedCanvas.getContext("2d");
-    if (!paddedContext) {
-        return;
-    }
-
-    // Clear with white
-    paddedContext.fillStyle = "#ffffff";
-    paddedContext.fillRect(0, 0, paddedCanvas.width, paddedCanvas.height);
-    paddedContext.drawImage(canvas, canvasPadding / 2, canvasPadding / 2);
-
-    // Enable anti-aliasing
-    paddedContext.imageSmoothingEnabled = true;
-    paddedContext.imageSmoothingQuality = "high";
-    // @ts-ignore
-    paddedContext.mozImageSmoothingEnabled = true;
-    // @ts-ignore
-    paddedContext.webkitImageSmoothingEnabled = true;
-
-    // Draw a slight gradient background with 10% opacity and "lighten" composite operation
-    paddedContext.globalCompositeOperation = "lighten";
-    const gradient = paddedContext.createLinearGradient(0, 0, 0, paddedCanvas.height);
-    gradient.addColorStop(0, "rgb(45, 45, 45)");
-    gradient.addColorStop(1, "rgb(45, 45, 45)");
-    paddedContext.fillStyle = gradient;
-    paddedContext.fillRect(0, 0, paddedCanvas.width, paddedCanvas.height);
-    paddedContext.globalCompositeOperation = "source-over";
-
-
-    let sizeX = Math.min(canvas.width, canvas.height) * (args.logoSize || 0.25);
-    let sizeY = sizeX;
-
-    if (haveLogo) {
-        // Get aspect of image
-        const aspect = faviconImage.width / faviconImage.height;
-        if (aspect > 1) sizeY = sizeX / aspect;
-        else sizeX = sizeY * aspect;
-
-        const rectanglePaddingPx = rectanglePadding * canvas.width;
-
-        // Apply padding
-        const sizeForBackground = Math.max(sizeX, sizeY);
-        const sizeXPadded = Math.round(sizeForBackground + rectanglePaddingPx);
-        const sizeYPadded = Math.round(sizeForBackground + rectanglePaddingPx);
-        const x = (paddedCanvas.width - sizeForBackground) / 2;
-        const y = (paddedCanvas.height - sizeForBackground) / 2;
-
-        // Draw shape with blurred shadow
-        paddedContext.shadowColor = shadowColor;
-        paddedContext.shadowBlur = shadowBlur;
-
-        // Draw rounded rectangle with radius
-        // Convert 0.4rem to pixels, taking DPI into account
-        const radius = rectangleRadius;
-        const xPadded = Math.round(x - rectanglePaddingPx / 2);
-        const yPadded = Math.round(y - rectanglePaddingPx / 2);
-        paddedContext.beginPath();
-        paddedContext.moveTo(xPadded + radius, yPadded);
-        paddedContext.lineTo(xPadded + sizeXPadded - radius, yPadded);
-        paddedContext.quadraticCurveTo(xPadded + sizeXPadded, yPadded, xPadded + sizeXPadded, yPadded + radius);
-        paddedContext.lineTo(xPadded + sizeXPadded, yPadded + sizeYPadded - radius);
-        paddedContext.quadraticCurveTo(xPadded + sizeXPadded, yPadded + sizeYPadded, xPadded + sizeXPadded - radius, yPadded + sizeYPadded);
-        paddedContext.lineTo(xPadded + radius, yPadded + sizeYPadded);
-        paddedContext.quadraticCurveTo(xPadded, yPadded + sizeYPadded, xPadded, yPadded + sizeYPadded - radius);
-        paddedContext.lineTo(xPadded, yPadded + radius);
-        paddedContext.quadraticCurveTo(xPadded, yPadded, xPadded + radius, yPadded);
-        paddedContext.fillStyle = "#ffffff";
-        paddedContext.closePath();
-        paddedContext.fill();
-        paddedContext.clip();
-
-        // Reset shadow and draw favicon
-        paddedContext.shadowColor = "transparent";
-        const logoX = (paddedCanvas.width - sizeX) / 2;
-        const logoY = (paddedCanvas.height - sizeY) / 2;
-        paddedContext.drawImage(faviconImage, logoX, logoY, sizeX, sizeY);
-    }
-
-    // Replace the canvas with the padded one
-    const paddedImage = paddedCanvas.toDataURL("image/png");
-    const img = document.createElement("img");
-    img.src = paddedImage;
-    img.style.width = "100%";
-    img.style.height = "auto";
-
-    return img;
-}

package/src/engine/engine_utils_attributes.ts

@@ -0,0 +1,72 @@
+
+
+/**
+ * @internal
+ */
+export namespace InternalAttributeUtils {
+
+    /**
+     * Checks if the given value is considered "falsey" in the context of HTML attributes.
+     * A value is considered falsey if it is "0" or "false" (case-insensitive).
+     *
+     * @param value - The attribute value to check.
+     * @returns True if the value is falsey, otherwise false.
+     */
+    export function isFalsey(value: string | null): boolean {
+        return value === "0" || value?.toLowerCase() === "false";
+    }
+
+    /**
+     * Retrieves the value of the specified attribute from the given element.
+     * If the attribute value is considered falsey, it returns null.
+     * @returns The attribute value or null if falsey.
+     */
+    export function getAttributeValueIfNotFalsey(element: Element, attributeName: string, opts?: { onAttribute: (value: string) => void }): string | null {
+        const attrValue = element.getAttribute(attributeName);
+        if (isFalsey(attrValue)) {
+            return null;
+        }
+        opts?.onAttribute?.call(null, attrValue!);
+        return attrValue;
+    }
+
+    /**
+     * Retrieves the value of the specified attribute from the given element.
+     * If the attribute value is considered falsey, it returns false.
+     * If the attribute is not set at all, it returns null.
+     * @returns The attribute value, false if falsey, or null if not set.
+     * 
+     * @example
+     * ```typescript
+     * const result = HTMLAttributeUtils.getAttributeAndCheckFalsey(element, 'data-example', {
+     *     onAttribute: (value, falsey) => {
+     *         console.log(`Attribute value: ${value}
+     * , Is falsey: ${falsey}`);
+     *     }
+     * });
+     * 
+     * if (result === false) {
+     *     console.log('The attribute is set to a falsey value.');
+     * } else if (result === null) {
+     *     console.log('The attribute is not set.');
+     * } else {
+     *     console.log(`The attribute value is: ${result}`);
+     * }
+     * ```
+     */
+    export function getAttributeAndCheckFalsey(element: Element, attributeName: string, opts?: { onAttribute: (value: string, falsey:boolean) => void }): false | string | null {
+        const attrValue = element.getAttribute(attributeName);
+        // If the attribute is not set at all we just return
+        if(attrValue === null) {
+            return null;
+        }
+        if (isFalsey(attrValue)) {
+            opts?.onAttribute?.call(null, attrValue!, true);
+            return false;
+        }
+        opts?.onAttribute?.call(null, attrValue!, false);
+        return attrValue;
+    }
+
+}
+

package/src/engine/engine_utils_qrcode.ts

@@ -0,0 +1,266 @@
+
+// use for typesafe interface method calls
+import { Quaternion, Vector2, Vector3, Vector4 } from "three";
+
+import { needleLogoOnlySVG } from "./assets/index.js";
+import { isDevEnvironment } from "./debug/debug.js";
+import { hasCommercialLicense } from "./engine_license.js";
+import { InternalAttributeUtils } from "./engine_utils_attributes.js";
+import type { NeedleEngineWebComponent } from "./webcomponents/needle-engine.js";
+
+
+
+/** Generates a QR code HTML image using https://github.com/davidshimjs/qrcodejs
+ * @param args.text The text to encode
+ * @param args.width The width of the QR code
+ * @param args.height The height of the QR code
+ * @param args.colorDark The color of the dark squares
+ * @param args.colorLight The color of the light squares
+ * @param args.correctLevel The error correction level to use
+ * @param args.showLogo If true, the logo will be shown in the center of the QR code. By default the Needle Logo will be used. You can override which logo is being used by setting the `needle-engine` web component's `qr-logo-src` attribute. The logo can also be disabled by setting that attribute to a falsey value (e.g. "0" or "false")
+ * @param args.showUrl If true, the URL will be shown below the QR code
+ * @param args.domElement The dom element to append the QR code to. If not provided a new div will be created and returned
+ * @returns The dom element containing the QR code
+ */
+export async function generateQRCode(args: { domElement?: HTMLElement, text: string, width?: number, height?: number, colorDark?: string, colorLight?: string, correctLevel?: any, showLogo?: boolean, showUrl?: boolean }): Promise<HTMLElement> {
+
+    // Ensure that the QRCode library is loaded
+    if (!globalThis["QRCode"]) {
+        const url = "https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@gh-pages/qrcode.min.js";
+        let script = document.head.querySelector(`script[src="${url}"]`) as HTMLScriptElement;
+        if (!script) {
+            script = document.createElement("script");
+            script.src = url;
+            document.head.appendChild(script);
+        }
+
+        await new Promise((resolve, _reject) => {
+            script.addEventListener("load", () => {
+                resolve(true);
+            });
+        });
+    }
+
+    const QRCODE = globalThis["QRCode"];
+    const target = args.domElement ?? document.createElement("div");
+    const qrCode = new QRCODE(target, {
+        width: args.width ?? 256,
+        height: args.height ?? 256,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: args.showLogo ? QRCODE.CorrectionLevel.H : QRCODE.CorrectLevel.M,
+        ...args,
+    });
+
+    // Number of rows/columns of the generated QR code
+    const moduleCount = qrCode?._oQRCode.moduleCount || 0;
+    const canvas = qrCode?._oDrawing?._elCanvas as HTMLCanvasElement;
+
+    let sizePercentage = 0.25;
+    if (moduleCount < 40)
+        sizePercentage = Math.floor(moduleCount / 4) / moduleCount;
+    else
+        sizePercentage = Math.floor(moduleCount / 6) / moduleCount;
+
+    const paddingPercentage = Math.floor(moduleCount / 20) / moduleCount;
+    try {
+        const img = await internalRenderQRCodeOverlays(canvas, { showLogo: args.showLogo, logoSize: sizePercentage, logoPadding: paddingPercentage }).catch(_e => { /** ignore */ });
+        if (img) {
+            target.innerHTML = "";
+            target.append(img);
+        }
+    }
+    catch { } // Ignore
+
+    if (args.showUrl !== false && args.text) {
+        // Add link label below the QR code
+        // Clean up the text. If it's a URL: remove the protocol, www. part, trailing slashes or trailing question marks
+        const existingLabel = target.querySelector(".qr-code-link-label");
+        let displayText = args.text.replace(/^(https?:\/\/)?(www\.)?/, "").replace(/\/+$/, "").replace(/\?+$/, "");
+        displayText = "Scan to visit " + displayText;
+        if (existingLabel) {
+            existingLabel.textContent = displayText;
+        } else {
+            // Create a new label
+            const linkLabel = document.createElement("div");
+            linkLabel.classList.add("qr-code-link-label");
+            args.text = displayText;
+            linkLabel.textContent = args.text;
+            linkLabel.addEventListener("click", (ev) => {
+                // Prevent the QR panel from closing
+                ev.stopImmediatePropagation();
+            });
+
+            linkLabel.style.textAlign = "center";
+            linkLabel.style.fontSize = "0.8em";
+            linkLabel.style.marginTop = "0.1em";
+            linkLabel.style.color = "#000000";
+            linkLabel.style.fontFamily = "'Roboto Flex', sans-serif";
+            linkLabel.style.opacity = "0.5";
+            linkLabel.style.wordBreak = "break-all";
+            linkLabel.style.wordWrap = "break-word";
+            linkLabel.style.marginBottom = "0.3em";
+
+            // Ensure max. width
+            target.style.width = "calc(210px + 20px)";
+
+            target.appendChild(linkLabel);
+        }
+    }
+
+    return target;
+}
+
+
+async function internalRenderQRCodeOverlays(canvas: HTMLCanvasElement, args: { showLogo?: boolean, logoSize?: number, logoPadding?: number }): Promise<HTMLImageElement | void> {
+    if (!canvas) return;
+
+    // Internal settings
+    const canvasPadding = 8;
+    const shadowBlur = 20;
+    const rectanglePadding = args.logoPadding || 1. / 32;
+    // With dropshadow under the logo
+    /*
+    const shadowColor = "#00000099";
+    const rectangleRadius = 0.4 * 16;
+    */
+    // Without dropshadow under the logo
+    const shadowColor = "transparent";
+    const rectangleRadius = 0;
+
+    // Draw the website's icon in the center of the QR code
+    const image = new Image();
+    const element = document.querySelector("needle-engine") as NeedleEngineWebComponent;
+    if (!element) {
+        console.debug("[QR Code] No web component found")
+    }
+
+    const canUseCustomLogo = hasCommercialLicense();
+
+    // Query logo src from needle-engine attribute.
+    // For any supported attribute it's possible to use "falsey" values (e.g. "0" or "false" to disable the logo in the QR code)
+    let logoSrc: false | string | null = null;
+    logoSrc = InternalAttributeUtils.getAttributeAndCheckFalsey(element, "qrcode-logo-src");
+    if (canUseCustomLogo && args.showLogo !== true && logoSrc === false) return; // Explictly disabled
+    logoSrc ||= InternalAttributeUtils.getAttributeAndCheckFalsey(element, "logo-src");
+    if (canUseCustomLogo && args.showLogo !== true && logoSrc === false) return; // Explicitly disabled
+    logoSrc ||= InternalAttributeUtils.getAttributeAndCheckFalsey(element, "loading-logo-src", {
+        onAttribute: () => {
+            if (isDevEnvironment()) console.warn("[QR Code] 'loading-logo-src' is deprecated, please use 'logo-src' or 'qrcode-logo-src' instead.");
+            else console.debug("[QR Code] 'loading-logo-src' is deprecated.");
+        }
+    });
+    if (canUseCustomLogo && args.showLogo !== true && logoSrc === false) return; // Explicitly disabled
+
+    if (logoSrc && !canUseCustomLogo) {
+        console.warn("[QR Code] Custom logo is only available with a commercial license. Using default Needle logo. Please get a commercial license at https://needle.tools/pricing.");
+        logoSrc = null;
+    }
+
+    logoSrc ||= needleLogoOnlySVG;
+    if (!logoSrc) return;
+
+    let haveLogo = false;
+    if (args.showLogo !== false) {
+        image.src = logoSrc;
+        haveLogo = await new Promise((resolve, _reject) => {
+            image.onload = () => resolve(true);
+            image.onerror = (err) => {
+                const errorUrl = logoSrc !== needleLogoOnlySVG ? "'" + logoSrc + "'" : null;
+                console.error("[QR Code] Error loading logo image for QR code", errorUrl, isDevEnvironment() ? err : "");
+                resolve(false);
+            };
+        });
+    }
+
+    // Add some padding around the canvas – we need to copy the QR code image to a larger canvas
+    const paddedCanvas = document.createElement("canvas");
+    paddedCanvas.width = canvas.width + canvasPadding;
+    paddedCanvas.height = canvas.height + canvasPadding;
+    const paddedContext = paddedCanvas.getContext("2d");
+    if (!paddedContext) {
+        return;
+    }
+
+    // Clear with white
+    paddedContext.fillStyle = "#ffffff";
+    paddedContext.fillRect(0, 0, paddedCanvas.width, paddedCanvas.height);
+    paddedContext.drawImage(canvas, canvasPadding / 2, canvasPadding / 2);
+
+    // Enable anti-aliasing
+    paddedContext.imageSmoothingEnabled = true;
+    paddedContext.imageSmoothingQuality = "high";
+    // @ts-ignore
+    paddedContext.mozImageSmoothingEnabled = true;
+    // @ts-ignore
+    paddedContext.webkitImageSmoothingEnabled = true;
+
+    // Draw a slight gradient background with 10% opacity and "lighten" composite operation
+    paddedContext.globalCompositeOperation = "lighten";
+    const gradient = paddedContext.createLinearGradient(0, 0, 0, paddedCanvas.height);
+    gradient.addColorStop(0, "rgb(45, 45, 45)");
+    gradient.addColorStop(1, "rgb(45, 45, 45)");
+    paddedContext.fillStyle = gradient;
+    paddedContext.fillRect(0, 0, paddedCanvas.width, paddedCanvas.height);
+    paddedContext.globalCompositeOperation = "source-over";
+
+
+    let sizeX = Math.min(canvas.width, canvas.height) * (args.logoSize || 0.25);
+    let sizeY = sizeX;
+
+    if (haveLogo) {
+        // Get aspect of image
+        const aspect = image.width / image.height;
+        if (aspect > 1) sizeY = sizeX / aspect;
+        else sizeX = sizeY * aspect;
+
+        const rectanglePaddingPx = rectanglePadding * canvas.width;
+
+        // Apply padding
+        const sizeForBackground = Math.max(sizeX, sizeY);
+        const sizeXPadded = Math.round(sizeForBackground + rectanglePaddingPx);
+        const sizeYPadded = Math.round(sizeForBackground + rectanglePaddingPx);
+        const x = (paddedCanvas.width - sizeForBackground) / 2;
+        const y = (paddedCanvas.height - sizeForBackground) / 2;
+
+        // Draw shape with blurred shadow
+        paddedContext.shadowColor = shadowColor;
+        paddedContext.shadowBlur = shadowBlur;
+
+        // Draw rounded rectangle with radius
+        // Convert 0.4rem to pixels, taking DPI into account
+        const radius = rectangleRadius;
+        const xPadded = Math.round(x - rectanglePaddingPx / 2);
+        const yPadded = Math.round(y - rectanglePaddingPx / 2);
+        paddedContext.beginPath();
+        paddedContext.moveTo(xPadded + radius, yPadded);
+        paddedContext.lineTo(xPadded + sizeXPadded - radius, yPadded);
+        paddedContext.quadraticCurveTo(xPadded + sizeXPadded, yPadded, xPadded + sizeXPadded, yPadded + radius);
+        paddedContext.lineTo(xPadded + sizeXPadded, yPadded + sizeYPadded - radius);
+        paddedContext.quadraticCurveTo(xPadded + sizeXPadded, yPadded + sizeYPadded, xPadded + sizeXPadded - radius, yPadded + sizeYPadded);
+        paddedContext.lineTo(xPadded + radius, yPadded + sizeYPadded);
+        paddedContext.quadraticCurveTo(xPadded, yPadded + sizeYPadded, xPadded, yPadded + sizeYPadded - radius);
+        paddedContext.lineTo(xPadded, yPadded + radius);
+        paddedContext.quadraticCurveTo(xPadded, yPadded, xPadded + radius, yPadded);
+        paddedContext.fillStyle = "#ffffff";
+        paddedContext.closePath();
+        paddedContext.fill();
+        paddedContext.clip();
+
+        // Reset shadow and draw favicon
+        paddedContext.shadowColor = "transparent";
+        const logoX = (paddedCanvas.width - sizeX) / 2;
+        const logoY = (paddedCanvas.height - sizeY) / 2;
+        paddedContext.drawImage(image, logoX, logoY, sizeX, sizeY);
+    }
+
+    // Replace the canvas with the padded one
+    const paddedImage = paddedCanvas.toDataURL("image/png");
+    const img = document.createElement("img");
+    img.src = paddedImage;
+    img.style.width = "100%";
+    img.style.height = "auto";
+
+    return img;
+}
+