@rive-app/canvas-single 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-single",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Rive's high-level canvas based web api all in one js file.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -315,6 +315,13 @@ export declare class Rive {
      * when the canvas is resized
      */
     resizeToCanvas(): void;
+    /**
+     * Accounts for devicePixelRatio as a multiplier to render the size of the canvas drawing surface.
+     * Uses the size of the backing canvas to set new width/height attributes. Need to re-render
+     * and resize the layout to match the new drawing surface afterwards. Useful function for consumers
+     * to include in a window resize listener
+     */
+    resizeDrawingSurfaceToCanvas(): void;
     get source(): string;
     /**
      * Returns the name of the active artboard

package/rive.js

@@ -124,7 +124,7 @@ if(h.preInit)for("function"==typeof h.preInit&&(h.preInit=[h.preInit]);0<h.preIn
 /* 2 */
 /***/ ((module) => {
 
-module.exports = JSON.parse('{"name":"@rive-app/canvas-single","version":"1.0.18","description":"Rive\'s high-level canvas based web api all in one js file.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = JSON.parse('{"name":"@rive-app/canvas-single","version":"1.0.19","description":"Rive\'s high-level canvas based web api all in one js file.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.d.ts","rive_advanced.mjs.d.ts"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ })
 /******/ 	]);
@@ -1071,7 +1071,7 @@ var Rive = /** @class */ (function () {
             autoplay: params.autoplay,
             animations: params.animations,
             stateMachines: params.stateMachines,
-            artboard: params.artboard
+            artboard: params.artboard,
         });
     }
     // Alternative constructor to build a Rive instance from an interface/object
@@ -1101,6 +1101,10 @@ var Rive = /** @class */ (function () {
             _this.runtime = runtime;
             // Get the canvas where you want to render the animation and create a renderer
             _this.renderer = _this.runtime.makeRenderer(_this.canvas);
+            // Initial size adjustment based on devicePixelRatio if no width/height are specified explicitly
+            if (!(_this.canvas.width || _this.canvas.height)) {
+                _this.resizeDrawingSurfaceToCanvas();
+            }
             // Load Rive data from a source uri or a data buffer
             _this.initData(artboard, startingAnimationNames, startingStateMachineNames, autoplay).catch(function (e) {
                 console.error(e);
@@ -1449,6 +1453,22 @@ var Rive = /** @class */ (function () {
             maxY: this.canvas.height
         });
     };
+    /**
+     * Accounts for devicePixelRatio as a multiplier to render the size of the canvas drawing surface.
+     * Uses the size of the backing canvas to set new width/height attributes. Need to re-render
+     * and resize the layout to match the new drawing surface afterwards. Useful function for consumers
+     * to include in a window resize listener
+     */
+    Rive.prototype.resizeDrawingSurfaceToCanvas = function () {
+        if (this.canvas instanceof HTMLCanvasElement && !!window) {
+            var _a = this.canvas.getBoundingClientRect(), width = _a.width, height = _a.height;
+            var dpr = window.devicePixelRatio || 1;
+            this.canvas.width = dpr * width;
+            this.canvas.height = dpr * height;
+            this.startRendering();
+            this.resizeToCanvas();
+        }
+    };
     Object.defineProperty(Rive.prototype, "source", {
         // Returns the animation source, which may be undefined
         get: function () {