html2canvas-pro 2.0.3 → 2.1.0

package/src/render/stacking-context.ts

@@ -0,0 +1,386 @@
+import { ElementContainer } from '../dom/element-container';
+import { contains } from '../core/bitwise';
+import { BoundCurves, calculateBorderBoxPath, calculatePaddingBoxPath } from './bound-curves';
+import {
+    BlendEffect,
+    ClipEffect,
+    ClipPathEffect,
+    EffectTarget,
+    IElementEffect,
+    isClipEffect,
+    OpacityEffect,
+    TransformEffect
+} from './effects';
+import { Matrix } from '../css/property-descriptors/transform';
+import { OVERFLOW } from '../css/property-descriptors/overflow';
+import { equalPath } from './path';
+import { DISPLAY } from '../css/property-descriptors/display';
+import { OLElementContainer } from '../dom/elements/ol-element-container';
+import { LIElementContainer } from '../dom/elements/li-element-container';
+import { createCounterText } from '../css/types/functions/counter';
+import { POSITION } from '../css/property-descriptors/position';
+import { getAbsoluteValue } from '../css/types/length-percentage';
+import { Bounds } from '../css/layout/bounds';
+import { CLIP_PATH_TYPE, ClipPathValue, ShapeRadius } from '../css/property-descriptors/clip-path';
+import { MIX_BLEND_MODE } from '../css/property-descriptors/mix-blend-mode';
+
+export class StackingContext {
+    element: ElementPaint;
+    negativeZIndex: StackingContext[];
+    zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];
+    positiveZIndex: StackingContext[];
+    nonPositionedFloats: StackingContext[];
+    nonPositionedInlineLevel: StackingContext[];
+    inlineLevel: ElementPaint[];
+    nonInlineLevel: ElementPaint[];
+
+    constructor(container: ElementPaint) {
+        this.element = container;
+        this.inlineLevel = [];
+        this.nonInlineLevel = [];
+        this.negativeZIndex = [];
+        this.zeroOrAutoZIndexOrTransformedOrOpacity = [];
+        this.positiveZIndex = [];
+        this.nonPositionedFloats = [];
+        this.nonPositionedInlineLevel = [];
+    }
+}
+
+export class ElementPaint {
+    readonly effects: IElementEffect[] = [];
+    readonly curves: BoundCurves;
+    listValue?: string;
+
+    constructor(
+        readonly container: ElementContainer,
+        readonly parent: ElementPaint | null
+    ) {
+        this.curves = new BoundCurves(this.container);
+        if (this.container.styles.opacity < 1) {
+            this.effects.push(new OpacityEffect(this.container.styles.opacity));
+        }
+
+        if (this.container.styles.rotate !== null) {
+            const origin = this.container.styles.transformOrigin;
+            const offsetX = this.container.bounds.left + getAbsoluteValue(origin[0], this.container.bounds.width);
+            const offsetY = this.container.bounds.top + getAbsoluteValue(origin[1], this.container.bounds.height);
+            // Apply rotate property if present
+            const angle = this.container.styles.rotate;
+            const rad = (angle * Math.PI) / 180;
+            const cos = Math.cos(rad);
+            const sin = Math.sin(rad);
+            const rotateMatrix: Matrix = [cos, sin, -sin, cos, 0, 0];
+            this.effects.push(new TransformEffect(offsetX, offsetY, rotateMatrix));
+        }
+
+        if (this.container.styles.transform !== null) {
+            const origin = this.container.styles.transformOrigin;
+            const offsetX = this.container.bounds.left + getAbsoluteValue(origin[0], this.container.bounds.width);
+            const offsetY = this.container.bounds.top + getAbsoluteValue(origin[1], this.container.bounds.height);
+            const matrix = this.container.styles.transform;
+            this.effects.push(new TransformEffect(offsetX, offsetY, matrix));
+        }
+
+        if (hasOverflowClip(this.container.styles)) {
+            const borderBox = calculateBorderBoxPath(this.curves);
+            const paddingBox = calculatePaddingBoxPath(this.curves);
+
+            if (equalPath(borderBox, paddingBox)) {
+                this.effects.push(new ClipEffect(borderBox, EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT));
+            } else {
+                this.effects.push(new ClipEffect(borderBox, EffectTarget.BACKGROUND_BORDERS));
+                this.effects.push(new ClipEffect(paddingBox, EffectTarget.CONTENT));
+            }
+        }
+
+        if (this.container.styles.clipPath.type !== CLIP_PATH_TYPE.NONE) {
+            const clipPathEffect = buildClipPathEffect(this.container.styles.clipPath, this.container.bounds);
+            if (clipPathEffect) {
+                this.effects.push(clipPathEffect);
+            }
+        }
+
+        if (this.container.styles.mixBlendMode !== MIX_BLEND_MODE.NORMAL) {
+            this.effects.push(new BlendEffect(this.container.styles.mixBlendMode as GlobalCompositeOperation));
+        }
+    }
+
+    getEffects(target: EffectTarget): IElementEffect[] {
+        let inFlow = [POSITION.ABSOLUTE, POSITION.FIXED].indexOf(this.container.styles.position) === -1;
+        let parent = this.parent;
+        const effects = this.effects.slice(0);
+        while (parent) {
+            const croplessEffects = parent.effects.filter((effect) => !isClipEffect(effect));
+            if (inFlow || parent.container.styles.position !== POSITION.STATIC || !parent.parent) {
+                inFlow = [POSITION.ABSOLUTE, POSITION.FIXED].indexOf(parent.container.styles.position) === -1;
+                if (hasOverflowClip(parent.container.styles)) {
+                    const borderBox = calculateBorderBoxPath(parent.curves);
+                    const paddingBox = calculatePaddingBoxPath(parent.curves);
+                    if (!equalPath(borderBox, paddingBox)) {
+                        effects.unshift(
+                            new ClipEffect(paddingBox, EffectTarget.BACKGROUND_BORDERS | EffectTarget.CONTENT)
+                        );
+                    }
+                }
+                effects.unshift(...croplessEffects);
+            } else {
+                effects.unshift(...croplessEffects);
+            }
+
+            parent = parent.parent;
+        }
+
+        return effects.filter((effect) => contains(effect.target, target));
+    }
+}
+
+const hasOverflowClip = (styles: ElementContainer['styles']): boolean =>
+    styles.overflowX !== OVERFLOW.VISIBLE || styles.overflowY !== OVERFLOW.VISIBLE;
+
+/**
+ * Resolve a `closest-side` or `farthest-side` shape-radius keyword to pixels
+ * for a single axis. Used by both `circle()` (per-axis) and `ellipse()`.
+ *
+ * @param r       - The ShapeRadius (keyword or length-percentage).
+ * @param center  - Absolute center coordinate on this axis (cx or cy).
+ * @param start   - Absolute start of the reference box on this axis.
+ * @param end     - Absolute end of the reference box on this axis.
+ * @param dimRef  - Reference dimension for resolving a length-percentage value.
+ */
+const resolveAxisRadius = (r: ShapeRadius, center: number, start: number, end: number, dimRef: number): number => {
+    if (r === 'closest-side') return Math.min(center - start, end - center);
+    if (r === 'farthest-side') return Math.max(center - start, end - center);
+    return getAbsoluteValue(r, dimRef);
+};
+
+/**
+ * Convert a parsed ClipPathValue + element bounds into a ClipPathEffect whose
+ * `applyClip` callback draws the clip shape directly onto the canvas context.
+ *
+ * All coordinates are computed in page-absolute space at construction time so
+ * the callback itself is allocation-free and executes synchronously.
+ */
+const buildClipPathEffect = (clipPath: ClipPathValue, bounds: Bounds): ClipPathEffect | null => {
+    const { left: bLeft, top: bTop, width: bWidth, height: bHeight } = bounds;
+
+    switch (clipPath.type) {
+        case CLIP_PATH_TYPE.INSET: {
+            const iLeft = getAbsoluteValue(clipPath.left, bWidth);
+            const iTop = getAbsoluteValue(clipPath.top, bHeight);
+            const x = bLeft + iLeft;
+            const y = bTop + iTop;
+            // Clamp to zero: per CSS spec, overlapping insets produce an empty shape.
+            const w = Math.max(0, bWidth - iLeft - getAbsoluteValue(clipPath.right, bWidth));
+            const h = Math.max(0, bHeight - iTop - getAbsoluteValue(clipPath.bottom, bHeight));
+            return new ClipPathEffect((ctx) => {
+                ctx.beginPath();
+                ctx.rect(x, y, w, h);
+                ctx.clip();
+            });
+        }
+
+        case CLIP_PATH_TYPE.CIRCLE: {
+            const cx = bLeft + getAbsoluteValue(clipPath.cx, bWidth);
+            const cy = bTop + getAbsoluteValue(clipPath.cy, bHeight);
+            let r: number;
+            if (clipPath.radius === 'closest-side') {
+                r = Math.min(cx - bLeft, cy - bTop, bLeft + bWidth - cx, bTop + bHeight - cy);
+            } else if (clipPath.radius === 'farthest-side') {
+                r = Math.max(cx - bLeft, cy - bTop, bLeft + bWidth - cx, bTop + bHeight - cy);
+            } else {
+                // Per CSS spec, percentage is relative to sqrt(w² + h²) / sqrt(2).
+                r = getAbsoluteValue(clipPath.radius, Math.sqrt(bWidth * bWidth + bHeight * bHeight) / Math.SQRT2);
+            }
+            return new ClipPathEffect((ctx) => {
+                ctx.beginPath();
+                ctx.arc(cx, cy, Math.max(0, r), 0, Math.PI * 2);
+                ctx.clip();
+            });
+        }
+
+        case CLIP_PATH_TYPE.ELLIPSE: {
+            const cx = bLeft + getAbsoluteValue(clipPath.cx, bWidth);
+            const cy = bTop + getAbsoluteValue(clipPath.cy, bHeight);
+            const rx = resolveAxisRadius(clipPath.rx, cx, bLeft, bLeft + bWidth, bWidth);
+            const ry = resolveAxisRadius(clipPath.ry, cy, bTop, bTop + bHeight, bHeight);
+            return new ClipPathEffect((ctx) => {
+                ctx.beginPath();
+                ctx.ellipse(cx, cy, Math.max(0, rx), Math.max(0, ry), 0, 0, Math.PI * 2);
+                ctx.clip();
+            });
+        }
+
+        case CLIP_PATH_TYPE.POLYGON: {
+            // Pre-compute all vertices in page-absolute coordinates.
+            const absPoints = clipPath.points.map(
+                ([px, py]) =>
+                    [bLeft + getAbsoluteValue(px, bWidth), bTop + getAbsoluteValue(py, bHeight)] as [number, number]
+            );
+            return new ClipPathEffect((ctx) => {
+                ctx.beginPath();
+                if (absPoints.length > 0) {
+                    ctx.moveTo(absPoints[0][0], absPoints[0][1]);
+                    for (let i = 1; i < absPoints.length; i++) {
+                        ctx.lineTo(absPoints[i][0], absPoints[i][1]);
+                    }
+                    ctx.closePath();
+                }
+                // Calling clip() with an empty path (zero points) is intentional:
+                // it clips the entire region to nothing, which is the correct
+                // behaviour for a degenerate polygon() per the CSS spec.
+                ctx.clip();
+            });
+        }
+
+        case CLIP_PATH_TYPE.PATH: {
+            // path() coordinates are in the element's local space (0,0 = element top-left).
+            // We temporarily translate the canvas origin to the element's position, clip
+            // with the Path2D, then restore only the transform matrix (not the clipping
+            // region) via setTransform so the clip persists for the enclosing
+            // ctx.save() / ctx.restore() pair managed by EffectsRenderer.
+            //
+            // When the element also has a CSS transform, that transform was already applied
+            // by a preceding TransformEffect, so the path coordinates end up correctly in
+            // the element's transformed local space — matching browser behaviour.
+            const { d } = clipPath;
+            let cachedPath: Path2D | null = null;
+            return new ClipPathEffect((ctx) => {
+                try {
+                    if (!cachedPath) {
+                        cachedPath = new Path2D(d);
+                    }
+                    const savedTransform = ctx.getTransform();
+                    ctx.translate(bLeft, bTop);
+                    ctx.clip(cachedPath);
+                    ctx.setTransform(savedTransform);
+                } catch (_e) {
+                    // Path2D or getTransform/setTransform not supported in this environment.
+                }
+            });
+        }
+
+        case CLIP_PATH_TYPE.NONE:
+            return null;
+
+        default: {
+            // Exhaustiveness guard: if a new CLIP_PATH_TYPE is added in the future
+            // without a corresponding case above, TypeScript will raise a compile-time
+            // error here rather than silently falling through.
+            const _exhaustive: never = clipPath;
+            void _exhaustive;
+            return null;
+        }
+    }
+};
+
+const parseStackTree = (
+    parent: ElementPaint,
+    stackingContext: StackingContext,
+    realStackingContext: StackingContext,
+    listItems: ElementPaint[]
+) => {
+    parent.container.elements.forEach((child) => {
+        const treatAsRealStackingContext = child.createsRealStackingContext;
+        const createsStackingContext = child.createsStackingContext;
+        const paintContainer = new ElementPaint(child, parent);
+        if (contains(child.styles.display, DISPLAY.LIST_ITEM)) {
+            listItems.push(paintContainer);
+        }
+
+        const listOwnerItems = child.isListOwner ? [] : listItems;
+
+        if (treatAsRealStackingContext || createsStackingContext) {
+            const parentStack =
+                treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext;
+
+            const stack = new StackingContext(paintContainer);
+
+            if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) {
+                const order = child.styles.zIndex.order;
+                if (order < 0) {
+                    let index = 0;
+
+                    parentStack.negativeZIndex.some((current, i) => {
+                        if (order > current.element.container.styles.zIndex.order) {
+                            index = i;
+                            return false;
+                        } else if (index > 0) {
+                            return true;
+                        }
+
+                        return false;
+                    });
+                    parentStack.negativeZIndex.splice(index, 0, stack);
+                } else if (order > 0) {
+                    let index = 0;
+                    parentStack.positiveZIndex.some((current, i) => {
+                        if (order >= current.element.container.styles.zIndex.order) {
+                            index = i + 1;
+                            return false;
+                        } else if (index > 0) {
+                            return true;
+                        }
+
+                        return false;
+                    });
+                    parentStack.positiveZIndex.splice(index, 0, stack);
+                } else {
+                    parentStack.zeroOrAutoZIndexOrTransformedOrOpacity.push(stack);
+                }
+            } else {
+                if (child.styles.isFloating()) {
+                    parentStack.nonPositionedFloats.push(stack);
+                } else {
+                    parentStack.nonPositionedInlineLevel.push(stack);
+                }
+            }
+
+            parseStackTree(
+                paintContainer,
+                stack,
+                treatAsRealStackingContext ? stack : realStackingContext,
+                listOwnerItems
+            );
+        } else {
+            if (child.styles.isInlineLevel()) {
+                stackingContext.inlineLevel.push(paintContainer);
+            } else {
+                stackingContext.nonInlineLevel.push(paintContainer);
+            }
+
+            parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems);
+        }
+
+        if (child.isListOwner) {
+            processListItems(child, listOwnerItems);
+        }
+    });
+};
+
+const processListItems = (owner: ElementContainer, elements: ElementPaint[]) => {
+    let numbering = owner instanceof OLElementContainer ? owner.start : 1;
+    const reversed = owner instanceof OLElementContainer ? owner.reversed : false;
+    for (let i = 0; i < elements.length; i++) {
+        const item = elements[i];
+        if (
+            item.container instanceof LIElementContainer &&
+            typeof item.container.value === 'number' &&
+            item.container.value !== 0
+        ) {
+            numbering = item.container.value;
+        }
+
+        item.listValue = createCounterText(numbering, item.container.styles.listStyleType, true);
+
+        numbering += reversed ? -1 : 1;
+    }
+};
+
+export const parseStackingContexts = (container: ElementContainer): StackingContext => {
+    const paintContainer = new ElementPaint(container, null);
+    const root = new StackingContext(paintContainer);
+    const listItems: ElementPaint[] = [];
+    parseStackTree(paintContainer, root, root, listItems);
+    processListItems(paintContainer.container, listItems);
+    return root;
+};

package/src/render/vector.ts

@@ -0,0 +1,19 @@
+import { IPath, Path, PathType } from './path';
+
+export class Vector implements IPath {
+    type: PathType;
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.type = PathType.VECTOR;
+        this.x = x;
+        this.y = y;
+    }
+
+    add(deltaX: number, deltaY: number): Vector {
+        return new Vector(this.x + deltaX, this.y + deltaY);
+    }
+}
+
+export const isVector = (path: Path): path is Vector => path.type === PathType.VECTOR;

package/demo/image-smoothing-demo.html

@@ -1,256 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Smoothing Demo - html2canvas-pro</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 1200px;
-            margin: 20px auto;
-            padding: 20px;
-        }
-        .demo-section {
-            margin-bottom: 40px;
-            border: 1px solid #ddd;
-            padding: 20px;
-            border-radius: 8px;
-        }
-        .demo-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            margin-top: 20px;
-        }
-        .demo-item {
-            border: 1px solid #ccc;
-            padding: 10px;
-            text-align: center;
-        }
-        .pixel-art {
-            width: 100px;
-            height: 100px;
-            background: linear-gradient(45deg, #ff0000 25%, #00ff00 25%, #00ff00 50%, #0000ff 50%, #0000ff 75%, #ffff00 75%);
-            margin: 10px auto;
-        }
-        .pixelated {
-            image-rendering: pixelated;
-            image-rendering: -webkit-optimize-contrast;
-            image-rendering: crisp-edges;
-        }
-        .smooth {
-            image-rendering: smooth;
-        }
-        .auto {
-            image-rendering: auto;
-        }
-        button {
-            background: #007bff;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 4px;
-            cursor: pointer;
-            margin: 5px;
-        }
-        button:hover {
-            background: #0056b3;
-        }
-        .output {
-            margin-top: 20px;
-            border: 1px solid #ddd;
-            padding: 10px;
-            background: #f5f5f5;
-        }
-        canvas {
-            border: 1px solid #999;
-            display: block;
-            margin: 10px auto;
-        }
-    </style>
-</head>
-<body>
-    <h1>Image Smoothing Demo</h1>
-    <p>This demo shows how html2canvas-pro handles different image-rendering CSS properties and global imageSmoothing options.</p>
-
-    <div class="demo-section">
-        <h2>Test 1: CSS image-rendering Property</h2>
-        <p>These images use different CSS <code>image-rendering</code> values:</p>
-        <div class="demo-grid" id="css-demo">
-            <div class="demo-item">
-                <h3>pixelated</h3>
-                <div class="pixel-art pixelated"></div>
-                <p>CSS: <code>image-rendering: pixelated</code></p>
-            </div>
-            <div class="demo-item">
-                <h3>crisp-edges</h3>
-                <div class="pixel-art" style="image-rendering: crisp-edges;"></div>
-                <p>CSS: <code>image-rendering: crisp-edges</code></p>
-            </div>
-            <div class="demo-item">
-                <h3>smooth (default)</h3>
-                <div class="pixel-art smooth"></div>
-                <p>CSS: <code>image-rendering: smooth</code></p>
-            </div>
-            <div class="demo-item">
-                <h3>auto</h3>
-                <div class="pixel-art auto"></div>
-                <p>CSS: <code>image-rendering: auto</code></p>
-            </div>
-        </div>
-        <button onclick="renderCssDemo()">Render with CSS Properties</button>
-        <div class="output" id="css-output"></div>
-    </div>
-
-    <div class="demo-section">
-        <h2>Test 2: Global imageSmoothing Option</h2>
-        <p>Same image rendered with different global options:</p>
-        <div class="demo-grid" id="global-demo">
-            <div class="demo-item">
-                <h3>Original</h3>
-                <div class="pixel-art"></div>
-            </div>
-        </div>
-        <button onclick="renderWithSmoothing()">Render with Smoothing (default)</button>
-        <button onclick="renderWithoutSmoothing()">Render without Smoothing</button>
-        <button onclick="renderWithQuality()">Render with High Quality</button>
-        <div class="output" id="global-output"></div>
-    </div>
-
-    <div class="demo-section">
-        <h2>Test 3: Low Resolution Image Upscaling</h2>
-        <p>A small pixel art image upscaled to show the smoothing difference:</p>
-        <div class="demo-grid" id="upscale-demo">
-            <div class="demo-item">
-                <h3>8x8 Pixel Art</h3>
-                <canvas id="small-pixel-art" width="8" height="8"></canvas>
-            </div>
-        </div>
-        <button onclick="renderUpscaleSmooth()">Upscale with Smoothing</button>
-        <button onclick="renderUpscalePixelated()">Upscale Pixelated</button>
-        <div class="output" id="upscale-output"></div>
-    </div>
-
-    <script src="../dist/html2canvas-pro.js"></script>
-    <script>
-        // Create a simple pixel art on canvas
-        function createPixelArt() {
-            const canvas = document.getElementById('small-pixel-art');
-            const ctx = canvas.getContext('2d');
-            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffffff', '#000000'];
-            
-            for (let y = 0; y < 8; y++) {
-                for (let x = 0; x < 8; x++) {
-                    ctx.fillStyle = colors[(x + y) % colors.length];
-                    ctx.fillRect(x, y, 1, 1);
-                }
-            }
-        }
-        createPixelArt();
-
-        async function renderCssDemo() {
-            const element = document.getElementById('css-demo');
-            const output = document.getElementById('css-output');
-            output.innerHTML = '<p>Rendering with CSS image-rendering properties...</p>';
-            
-            try {
-                const canvas = await html2canvas(element, { logging: true });
-                output.innerHTML = '<h3>Result:</h3>';
-                output.appendChild(canvas);
-                console.log('CSS demo rendered successfully');
-            } catch (error) {
-                output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-            }
-        }
-
-        async function renderWithSmoothing() {
-            const element = document.getElementById('global-demo');
-            const output = document.getElementById('global-output');
-            output.innerHTML = '<p>Rendering with smoothing enabled (default)...</p>';
-            
-            try {
-                const canvas = await html2canvas(element, {
-                    imageSmoothing: true,
-                    logging: true
-                });
-                output.innerHTML = '<h3>Result (smoothing=true):</h3>';
-                output.appendChild(canvas);
-            } catch (error) {
-                output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-            }
-        }
-
-        async function renderWithoutSmoothing() {
-            const element = document.getElementById('global-demo');
-            const output = document.getElementById('global-output');
-            output.innerHTML = '<p>Rendering without smoothing (pixelated)...</p>';
-            
-            try {
-                const canvas = await html2canvas(element, {
-                    imageSmoothing: false,
-                    logging: true
-                });
-                output.innerHTML = '<h3>Result (smoothing=false):</h3>';
-                output.appendChild(canvas);
-            } catch (error) {
-                output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-            }
-        }
-
-        async function renderWithQuality() {
-            const element = document.getElementById('global-demo');
-            const output = document.getElementById('global-output');
-            output.innerHTML = '<p>Rendering with high quality smoothing...</p>';
-            
-            try {
-                const canvas = await html2canvas(element, {
-                    imageSmoothing: true,
-                    imageSmoothingQuality: 'high',
-                    logging: true
-                });
-                output.innerHTML = '<h3>Result (quality=high):</h3>';
-                output.appendChild(canvas);
-            } catch (error) {
-                output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-            }
-        }
-
-        async function renderUpscaleSmooth() {
-            const canvas = document.getElementById('small-pixel-art');
-            const output = document.getElementById('upscale-output');
-            output.innerHTML = '<p>Upscaling with smoothing...</p>';
-            
-            try {
-                const result = await html2canvas(canvas.parentElement, {
-                    imageSmoothing: true,
-                    scale: 4,
-                    logging: true
-                });
-                output.innerHTML = '<h3>Result (smooth, 4x scale):</h3>';
-                output.appendChild(result);
-            } catch (error) {
-                output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-            }
-        }
-
-        async function renderUpscalePixelated() {
-            const canvas = document.getElementById('small-pixel-art');
-            const output = document.getElementById('upscale-output');
-            output.innerHTML = '<p>Upscaling without smoothing (pixelated)...</p>';
-            
-            try {
-                const result = await html2canvas(canvas.parentElement, {
-                    imageSmoothing: false,
-                    scale: 4,
-                    logging: true
-                });
-                output.innerHTML = '<h3>Result (pixelated, 4x scale):</h3>';
-                output.appendChild(result);
-            } catch (error) {
-                output.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
-            }
-        }
-    </script>
-</body>
-</html>