like2d 2.11.1 → 2.12.1

package/assets/logo.svg

@@ -3,12 +3,15 @@
 
 <svg
    width="100mm"
-   height="105mm"
-   viewBox="0 0 100 105"
+   height="100mm"
+   viewBox="0 0 100 100"
    version="1.1"
    id="svg1"
    inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
    sodipodi:docname="logo.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="203.2"
+   inkscape:export-ydpi="203.2"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -24,15 +27,16 @@
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="mm"
      showgrid="false"
-     inkscape:zoom="1.3509661"
-     inkscape:cx="196.89613"
-     inkscape:cy="207.62919"
+     inkscape:zoom="1.7263173"
+     inkscape:cx="202.16446"
+     inkscape:cy="214.03945"
      inkscape:window-width="1864"
      inkscape:window-height="1163"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
-     inkscape:current-layer="layer1">
+     inkscape:current-layer="layer1"
+     showguides="true">
     <inkscape:grid
        id="grid1"
        units="mm"
@@ -55,134 +59,85 @@
      inkscape:groupmode="layer"
      id="layer1">
     <rect
-       style="fill:#e48080;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect6"
-       width="80"
-       height="83.543648"
-       x="10.000003"
-       y="14.404639" />
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       id="rect8"
+       width="67.87429"
+       height="22.082184"
+       x="16.43322"
+       y="69.388191"
+       ry="3.2184362" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999999;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       id="path9"
+       cx="49.649223"
+       cy="49.477631"
+       r="36.714138" />
     <path
        id="rect3"
-       style="fill:#80c3e4;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 49.999951,4.1791571 -24.73596,24.7359569 -0.01292,0.0129 a 17.500002,17.500002 0 0 0 0,24.74888 17.500002,17.500002 0 0 0 22.243603,2.07688 17.500002,17.500002 0 0 1 0.0052,0.42271 17.500002,17.500002 0 0 1 -17.500224,17.50022 h 40.000139 a 17.500002,17.500002 0 0 1 -17.499707,-17.50022 17.500002,17.500002 0 0 1 0.0052,-0.42271 17.500002,17.500002 0 0 0 22.243597,-2.0774 17.500002,17.500002 0 0 0 -5.1e-4,-24.74887 z" />
+       style="fill:#ba2b2b;fill-opacity:1;stroke:#ffcf42;stroke-width:0.5;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 49.999942,7.2545716 28.60704,28.647471 l -0.01117,0.01116 a 15.134882,15.134882 0 0 0 0,21.404075 15.134882,15.134882 0 0 0 19.237387,1.796191 15.134882,15.134882 0 0 1 0.0045,0.365581 15.134882,15.134882 0 0 1 -15.135074,15.13507 h 34.594132 a 15.134882,15.134882 0 0 1 -15.134627,-15.13507 15.134882,15.134882 0 0 1 0.0045,-0.365581 15.134882,15.134882 0 0 0 19.237382,-1.79664 15.134882,15.134882 0 0 0 -4.42e-4,-21.404067 z" />
     <circle
-       style="fill:none;stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;stroke:#ffcf42;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
        id="path1"
-       cx="-14.90022"
-       cy="-73.310486"
-       r="17.500002"
+       cx="-15.090682"
+       cy="-70.754875"
+       r="15.134882"
        transform="rotate(135)" />
     <circle
-       style="fill:none;stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;stroke:#ffcf42;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
        id="path1-8"
-       cx="2.5997834"
-       cy="-55.810471"
-       r="17.500002"
+       cx="0.04419899"
+       cy="-55.619984"
+       r="15.134882"
        transform="rotate(135)" />
     <circle
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;fill-opacity:1;stroke:#ffcf42;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
        id="path1-8-2"
-       cx="69.999847"
-       cy="56.176464"
-       r="17.500002" />
+       cx="67.29686"
+       cy="52.224457"
+       r="15.134882" />
     <circle
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:none;fill-opacity:1;stroke:#ffcf42;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1"
        id="path1-8-2-3"
-       cx="29.999849"
-       cy="56.176464"
-       r="17.500002" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect7"
-       width="21.818182"
-       height="19.209486"
-       x="10.000003"
-       y="78.870033" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect7-0"
-       width="14.545453"
-       height="19.209486"
-       x="31.818186"
-       y="78.870033" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect7-0-4"
-       width="21.818182"
-       height="19.209486"
-       x="46.36364"
-       y="78.870033" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect7-9"
-       width="21.818182"
-       height="19.209486"
-       x="68.181816"
-       y="78.870033" />
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect8"
-       width="7.272728"
-       height="11.408763"
-       x="24.545458"
-       y="78.870033" />
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9"
-       width="3.6363642"
-       height="7.8007298"
-       x="31.818186"
-       y="86.378426" />
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect9-0"
-       width="3.6363642"
-       height="7.8007298"
-       x="42.727276"
-       y="86.378433" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect11"
-       width="7.272727"
-       height="3.6080317"
-       x="31.818186"
-       y="78.870033" />
-    <rect
-       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect11-4"
-       width="7.272727"
-       height="3.6080317"
-       x="39.090912"
-       y="78.870033" />
-    <path
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 68.181821,90.278798 -7.272727,-3.900366 v 0 l 7.272726,-7.508396 z"
-       id="path11"
-       sodipodi:nodetypes="ccccc" />
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect12-9"
-       width="6.9679103"
-       height="3.9003553"
-       x="53.788776"
-       y="94.179153" />
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect12-9-9"
-       width="6.9679103"
-       height="3.9003553"
-       x="82.727272"
-       y="82.624237" />
-    <rect
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       id="rect12-9-9-9"
-       width="6.9679103"
-       height="3.9003553"
-       x="82.727272"
-       y="90.278801" />
-    <path
-       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.999997;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-       d="m 53.636366,86.378432 0.15241,-7.508396 h 7.120316 z"
-       id="path12" />
+       cx="32.702847"
+       cy="52.224457"
+       r="15.134882" />
+    <g
+       id="g8"
+       style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-linejoin:miter;stroke-opacity:1;stroke-width:0.5;stroke-dasharray:none"
+       transform="translate(0,1.0583333)">
+      <path
+         id="rect2"
+         style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="M 15.406292,74.466773 V 91.080229 H 28.446323 V 84.333871 H 22.864751 V 74.466773 Z"
+         sodipodi:nodetypes="ccccccc" />
+      <path
+         style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 33.048199,75.699528 v 3.500747 h 2.341044 v 5.04483 h -2.341044 v 6.83512 h 11.48336 v -6.83512 h -2.342303 v -5.04483 h 2.342303 v -3.500747 h -5.729088 -0.01385 z"
+         id="path7"
+         sodipodi:nodetypes="ccccccccccccccc" />
+      <path
+         id="rect7-9"
+         style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 69.67956,74.516469 v 16.613457 h 15.65488 v -6.019272 h -5.061194 v -2.314587 h 5.061194 v -3.24683 h -5.061194 v -2.315104 h 5.061194 v -2.717664 z"
+         sodipodi:nodetypes="ccccccccccccc" />
+      <path
+         id="rect5"
+         style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 49.204699,73.458136 v 17.671793 h 5.69836 v -2.315107 h 5.34696 v 2.315107 h 5.69836 c 0,0 0.486363,-6.903304 -1.021347,-8.571792 -1.610295,-1.782013 -2.956804,-2.064783 -2.956804,-2.064783 l 4.122579,-5.976885 h -6.317526 l -2.974663,5.947607 -2.014865,0.01689 -0.0035,-7.022831 z"
+         sodipodi:nodetypes="cccccccsccccccc" />
+      <circle
+         style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         id="path8"
+         cx="35.389244"
+         cy="71.791946"
+         r="2.7943003" />
+      <circle
+         style="fill:#ffcf42;fill-opacity:1;stroke:#000000;stroke-width:0.5;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         id="path8-6"
+         cx="42.119633"
+         cy="71.791946"
+         r="2.7943003" />
+    </g>
   </g>
 </svg>

package/dist/engine.d.ts

@@ -17,11 +17,13 @@ export declare class Engine {
     private isRunning;
     private lastTime;
     private abort;
+    private sceneStack;
     /**
      * The Like interface providing access to all engine subsystems.
      */
     readonly like: Like;
     constructor(container: HTMLElement);
+    private refreshScene;
     private dispatch;
     /**
      * Start the game loop.

package/dist/engine.js

@@ -42,6 +42,12 @@ export class Engine {
             writable: true,
             value: new AbortController()
         });
+        Object.defineProperty(this, "sceneStack", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
         /**
          * The Like interface providing access to all engine subsystems.
          */
@@ -53,16 +59,13 @@ export class Engine {
         });
         this.canvas = document.createElement('canvas');
         const canvas = new Canvas(this.canvas, this.dispatch.bind(this), this.abort.signal);
-        this.canvas.addEventListener("like:updateRenderTarget", (event) => {
-            this.like.gfx.setContext(event.detail.target.getContext("2d"));
-        });
         this.container.appendChild(this.canvas);
         const props = {
             canvas: this.canvas,
             dispatch: this.dispatch.bind(this),
             abort: this.abort.signal,
         };
-        const gfx = new Graphics(this.canvas.getContext('2d'));
+        const gfx = new Graphics(canvas.getContext());
         const audio = new Audio();
         const timer = new Timer(props);
         const keyboard = new Keyboard(props);
@@ -80,15 +83,22 @@ export class Engine {
             canvas,
             start: this.start.bind(this),
             dispose: this.dispose.bind(this),
+            getScene: (pos = -1) => {
+                return this.sceneStack.at(pos);
+            },
+            pushScene: (scene, _overlay) => {
+                this.sceneStack.push(scene);
+                this.refreshScene();
+            },
+            popScene: () => {
+                const s = this.sceneStack.pop();
+                this.refreshScene();
+                return s;
+            },
             setScene: (scene) => {
-                if (scene) {
-                    this.like.handleEvent = (event) => sceneDispatch(scene, this.like, event);
-                    if (this.isRunning)
-                        this.dispatch("load", []);
-                }
-                else {
-                    this.like.handleEvent = undefined;
-                }
+                const idx = Math.max(0, this.sceneStack.length - 1);
+                this.sceneStack[idx] = scene;
+                this.refreshScene();
             },
             callOwnHandlers: (event) => {
                 if (event.type in this.like)
@@ -99,6 +109,18 @@ export class Engine {
         window.addEventListener('blur', () => this.dispatch('blur', ['tab']));
         this.canvas.addEventListener('focus', () => this.dispatch('focus', ['canvas']));
     }
+    refreshScene() {
+        const topScene = this.sceneStack.at(-1);
+        if (topScene) {
+            this.like.handleEvent = (event) => sceneDispatch(topScene, this.like, event);
+            if (this.isRunning) {
+                this.dispatch("load", []);
+            }
+        }
+        else {
+            this.like.handleEvent = undefined;
+        }
+    }
     dispatch(type, args) {
         const event = { type, args, timestamp: this.like.timer.getTime() };
         if (this.like.handleEvent) {

package/dist/events.d.ts

@@ -11,9 +11,6 @@ export type LikeCanvasEventMap = HTMLElementEventMap & {
         pos: Vector2;
         delta: Vector2;
     }>;
-    'like:updateRenderTarget': CustomEvent<{
-        target: HTMLCanvasElement;
-    }>;
     'like:resizeCanvas': CustomEvent<{
         size: Vector2;
     }>;

package/dist/graphics/canvas.d.ts

@@ -12,21 +12,28 @@ export type CanvasSize = Vector2 | 'native';
  * A manager for the HTML canvas element, similar to `love.window`.
  *
  * Controls game size / scaling -- both native and pixelart mode via {@link Canvas.setMode}, as well as fullscreen functions.
+ *
+ * The canvas keeps two canvases: render and display. Each frame, it copies render to display before the canvas is presented.
+ * This allows for pixel-accurate scaling.
  */
 export declare class Canvas {
     /** The ultimately visible canvas in the browser */
     private displayCanvas;
     private dispatch;
     private abort;
-    /** The canvas that we're drawing to with `like.gfx` functions.
-     * If it's the same as displayCanvas, we're in native mode.
-     * Otherwise, we're in pixelart mode, consisting of nearest -> linear scaling.
-    */
+    /** The canvas that we're drawing to with `like.gfx` functions.  */
     private renderCanvas;
     private resizeTimeoutId;
+    private isNativeMode;
     constructor(
     /** The ultimately visible canvas in the browser */
     displayCanvas: LikeCanvasElement, dispatch: Dispatcher<'resize'>, abort: AbortSignal);
+    /**
+     * Get the canvas that graphics functions render to.
+     * This is separate from the display canvas; it is
+     * not visibly exposed but rather copied each frame.
+    */
+    getContext(): CanvasRenderingContext2D;
     /** Get a unified canvas info object. */
     getMode(): {
         size: Vector2;
@@ -57,14 +64,15 @@ export declare class Canvas {
     private getDisplayPixelSize;
     /** Are we fullscreen? */
     getFullscreen(): boolean;
+    /** Does the canvas have focus? */
+    hasFocus(): boolean;
     /** Set fullscreen. */
     setFullscreen(fullscreen: boolean): void;
     /**
-     * Called internally by the engine before
-     * rendering a frame.
+     * Trigered by `like:preDraw`
      */
     private preDraw;
-    /** Called every frame by the engine after drawing */
+    /** Triggered by `like:postDraw` */
     private postDraw;
     /** @returns if size was changed.  */
     static setCanvasElemSize(canvas: LikeCanvasElement, newSize: Vector2): boolean;

package/dist/graphics/canvas.js

@@ -4,6 +4,9 @@ import { Vec2 } from "../math/vector2";
  * A manager for the HTML canvas element, similar to `love.window`.
  *
  * Controls game size / scaling -- both native and pixelart mode via {@link Canvas.setMode}, as well as fullscreen functions.
+ *
+ * The canvas keeps two canvases: render and display. Each frame, it copies render to display before the canvas is presented.
+ * This allows for pixel-accurate scaling.
  */
 export class Canvas {
     constructor(
@@ -27,10 +30,7 @@ export class Canvas {
             writable: true,
             value: abort
         });
-        /** The canvas that we're drawing to with `like.gfx` functions.
-         * If it's the same as displayCanvas, we're in native mode.
-         * Otherwise, we're in pixelart mode, consisting of nearest -> linear scaling.
-        */
+        /** The canvas that we're drawing to with `like.gfx` functions.  */
         Object.defineProperty(this, "renderCanvas", {
             enumerable: true,
             configurable: true,
@@ -43,42 +43,39 @@ export class Canvas {
             writable: true,
             value: 0
         });
+        Object.defineProperty(this, "isNativeMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
         displayCanvas.tabIndex = 0;
         displayCanvas.style.width = '100%';
         displayCanvas.style.height = '100%';
-        this.renderCanvas = this.displayCanvas;
+        displayCanvas.style.objectFit = 'contain';
+        // Always create a separate render canvas
+        this.renderCanvas = document.createElement('canvas');
         this.setMode('native');
         /** Only the canvas can really transform the mouse to the game size.
          * This hack sends an event for the mouse module to listen to.
          */
         this.displayCanvas.addEventListener('mousemove', (ev) => {
-            let pos;
-            let delta;
             const rawPos = [ev.offsetX, ev.offsetY];
             const rawDelta = [ev.movementX, ev.movementY];
-            if (this.renderCanvas == this.displayCanvas) {
-                /* Native mode. */
-                pos = Vec2.mul(rawPos, window.devicePixelRatio ?? 1);
-                delta = Vec2.mul(rawDelta, window.devicePixelRatio ?? 1);
-            }
-            else {
-                /* Pixelart mode. This math simulates object-fit: contain,
-                * which preserves aspect ratio.
-                */
-                const csize = [
-                    this.displayCanvas.clientWidth,
-                    this.displayCanvas.clientHeight
-                ];
-                /* Scale of both dimensions */
-                const scale = calcAspectFriendlyScale(this.getSize(), csize);
-                /* Upper-left corner */
-                const offset = Vec2.div(Vec2.sub(csize, Vec2.mul(this.getSize(), scale)), 2);
-                pos = Vec2.div(Vec2.sub(rawPos, offset), scale);
-                delta = Vec2.div(rawDelta, scale);
-                /* Only handle mousemove events that are in bounds. */
-                if (!Rect.containsPoint(this.getRect(), pos)) {
-                    return;
-                }
+            /* Recreation of object-fit */
+            const csize = [
+                this.displayCanvas.clientWidth,
+                this.displayCanvas.clientHeight
+            ];
+            /* Scale of both dimensions */
+            const scale = calcAspectFriendlyScale(this.getSize(), csize);
+            /* Upper-left corner */
+            const offset = Vec2.div(Vec2.sub(csize, Vec2.mul(this.getSize(), scale)), 2);
+            const pos = Vec2.div(Vec2.sub(rawPos, offset), scale);
+            const delta = Vec2.div(rawDelta, scale);
+            /* Only handle mousemove events that are in bounds. */
+            if (!Rect.containsPoint(this.getRect(), pos)) {
+                return;
             }
             this.displayCanvas.dispatchEvent(new CustomEvent('like:mousemoved', {
                 detail: {
@@ -90,6 +87,14 @@ export class Canvas {
         this.displayCanvas.addEventListener("like:preDraw", this.preDraw.bind(this), { signal: this.abort });
         this.displayCanvas.addEventListener("like:postDraw", this.postDraw.bind(this), { signal: this.abort });
     }
+    /**
+     * Get the canvas that graphics functions render to.
+     * This is separate from the display canvas; it is
+     * not visibly exposed but rather copied each frame.
+    */
+    getContext() {
+        return this.renderCanvas.getContext('2d');
+    }
     /** Get a unified canvas info object. */
     getMode() {
         return {
@@ -115,27 +120,13 @@ export class Canvas {
      * @param flags optional options.
      */
     setMode(size, flags = {}) {
-        // set up sizing / render target
-        const prevRenderCanvas = this.renderCanvas;
-        if (size == 'native') {
-            this.displayCanvas.style.objectFit = 'fill';
-            this.renderCanvas = this.displayCanvas;
-        }
-        else {
-            this.displayCanvas.style.objectFit = 'contain';
-            this.renderCanvas = document.createElement('canvas');
+        this.isNativeMode = size === 'native';
+        if (size !== 'native') {
             const changed = Canvas.setCanvasElemSize(this.renderCanvas, size);
             if (changed) {
                 this.dispatchResize(size);
             }
         }
-        if (prevRenderCanvas != this.renderCanvas) {
-            this.displayCanvas.dispatchEvent(new CustomEvent("like:updateRenderTarget", {
-                detail: {
-                    target: this.renderCanvas,
-                },
-            }));
-        }
         if ('fullscreen' in flags) {
             this.setFullscreen(flags.fullscreen);
         }
@@ -164,6 +155,10 @@ export class Canvas {
     getFullscreen() {
         return this.displayCanvas === document.fullscreenElement;
     }
+    /** Does the canvas have focus? */
+    hasFocus() {
+        return document.activeElement === this.displayCanvas;
+    }
     /** Set fullscreen. */
     setFullscreen(fullscreen) {
         if (fullscreen) {
@@ -177,49 +172,50 @@ export class Canvas {
         }
     }
     /**
-     * Called internally by the engine before
-     * rendering a frame.
+     * Trigered by `like:preDraw`
      */
     preDraw() {
-        if (this.renderCanvas == this.displayCanvas) {
+        if (this.isNativeMode) {
+            // In native mode, renderCanvas tracks display size
             const realSize = this.getDisplayPixelSize();
-            if ((realSize[0] != this.displayCanvas.width ||
-                realSize[1] != this.displayCanvas.height) &&
+            if ((realSize[0] != this.renderCanvas.width ||
+                realSize[1] != this.renderCanvas.height) &&
                 !this.resizeTimeoutId) {
                 /** In native scaling mode, zooming and resizing the window cause us
                  * to set canvas width and height every frame, which could cause
                  * tons of canvas bitmap reallocations. So wait 1/4 second..
                  */
-                Canvas.setCanvasElemSize(this.displayCanvas, realSize);
+                Canvas.setCanvasElemSize(this.renderCanvas, realSize);
                 this.dispatchResize(realSize);
                 this.resizeTimeoutId = setTimeout(() => { this.resizeTimeoutId = 0; }, 250);
             }
         }
-        this.renderCanvas.getContext('2d').resetTransform();
+        const ctx = this.renderCanvas.getContext('2d');
+        ctx.resetTransform();
+        // Enable smoothing in native mode, disable in pixelart mode
+        ctx.imageSmoothingEnabled = this.isNativeMode;
     }
-    /** Called every frame by the engine after drawing */
+    /** Triggered by `like:postDraw` */
     postDraw() {
-        if (this.renderCanvas != this.displayCanvas) {
-            /* We're in pixelart mode,
-             * so set output canvas size to an ideal integer scale.
-             * No debounce: changes to integer ratio are infrequent.
-             */
+        // Always blit from render canvas to display canvas
+        if (this.isNativeMode) {
+            // In native mode, display canvas matches render canvas size
+            Canvas.setCanvasElemSize(this.displayCanvas, this.getSize());
+        }
+        else {
+            // In pixelart mode, set output canvas size to an ideal integer scale
             Canvas.setCanvasElemSize(this.displayCanvas, Vec2.mul(this.getSize(), Math.round(calcAspectFriendlyScale(this.getSize(), this.getDisplayPixelSize()))));
-            // Copy the internal canvas to the visible one.
-            const ctx = this.displayCanvas.getContext('2d');
-            ctx.imageSmoothingEnabled = false;
-            ctx.drawImage(this.renderCanvas, 0, 0, this.renderCanvas.width, this.renderCanvas.height, 0, 0, this.displayCanvas.width, this.displayCanvas.height);
         }
+        // Copy the render canvas to the visible one
+        const displayCtx = this.displayCanvas.getContext('2d');
+        displayCtx.imageSmoothingEnabled = false;
+        displayCtx.drawImage(this.renderCanvas, 0, 0, this.renderCanvas.width, this.renderCanvas.height, 0, 0, this.displayCanvas.width, this.displayCanvas.height);
     }
     /** @returns if size was changed.  */
     static setCanvasElemSize(canvas, newSize) {
-        const ctx = canvas.getContext('2d');
-        if (!ctx)
-            return false;
         if (canvas.width === newSize[0] && canvas.height === newSize[1])
             return false;
-        canvas.width = newSize[0];
-        canvas.height = newSize[1];
+        [canvas.width, canvas.height] = newSize;
         return true;
     }
     static getCanvasElemSize(canvas) {