add optional param for method resizeDrawingSurfaceToCanvas

Community PR: #343

Added some tests here too

Diffs=
26612a952 add optional param for method resizeDrawingSurfaceToCanvas (#6410)

Co-authored-by: Zachary Plata <[email protected]>
Co-authored-by: aratmany <[email protected]>

.rive_head

@@ -1 +1 @@
-a3788ed8ad14d8046faec27d34c9483ddb7d7cb3
+26612a9523ba4341bf30e30fb479804a98661972

js/src/rive.ts

@@ -1903,10 +1903,10 @@ export class Rive {
    * and resize the layout to match the new drawing surface afterwards.
    * Useful function for consumers to include in a window resize listener
    */
-  public resizeDrawingSurfaceToCanvas() {
+  public resizeDrawingSurfaceToCanvas(customDevicePixelRatio?: number) {
     if (this.canvas instanceof HTMLCanvasElement && !!window) {
       const { width, height } = this.canvas.getBoundingClientRect();
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = customDevicePixelRatio || window.devicePixelRatio || 1;
       this.canvas.width = dpr * width;
       this.canvas.height = dpr * height;
       this.startRendering();

js/test/initialisation.test.ts

@@ -288,4 +288,63 @@ test("Rive doesn't error out when cleaning up if the file is not set yet", () =>
   r.cleanup();
 });
 
+// #endregion
+
+// #region sizing the canvas
+
+test("resizeDrawingSurfaceToCanvas scales canvas with devicePixelRatio by default", (done) => {
+  Element.prototype.getBoundingClientRect = jest.fn(() => {
+    return {
+      width: 500,
+      height: 500,
+    } as DOMRect;
+  });
+  window.devicePixelRatio = 3;
+  const canvas = document.createElement("canvas");
+  canvas.style.width = "500px";
+  canvas.style.height = "500px";
+  canvas.width = 500;
+  canvas.height = 500;
+  const r = new rive.Rive({
+    canvas: canvas,
+    buffer: pingPongRiveFileBuffer,
+    onLoad: () => {
+      expect(canvas.width).toBe(500);
+      expect(canvas.height).toBe(500);
+      r.resizeDrawingSurfaceToCanvas();
+      console.log(canvas.getBoundingClientRect());
+      expect(canvas.width).toBe(1500);
+      expect(canvas.height).toBe(1500);
+      done();
+    },
+  });
+});
+
+test("resizeDrawingSurfaceToCanvas scales canvas with passed in ratio if present", (done) => {
+  Element.prototype.getBoundingClientRect = jest.fn(() => {
+    return {
+      width: 500,
+      height: 500,
+    } as DOMRect;
+  });
+  window.devicePixelRatio = 3;
+  const canvas = document.createElement("canvas");
+  canvas.style.width = "500px";
+  canvas.style.height = "500px";
+  canvas.width = 500;
+  canvas.height = 500;
+  const r = new rive.Rive({
+    canvas: canvas,
+    buffer: pingPongRiveFileBuffer,
+    onLoad: () => {
+      expect(canvas.width).toBe(500);
+      expect(canvas.height).toBe(500);
+      r.resizeDrawingSurfaceToCanvas(1);
+      expect(canvas.width).toBe(500);
+      expect(canvas.height).toBe(500);
+      done();
+    },
+  });
+});
+
 // #endregion