fix: Scaling problem on non-responsive webpage

Thor-x86 · May 19, 2021 · 3030728 · 3030728
1 parent 8840ccf
commit 3030728
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "compodraw",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Compose with JSX or XML then draw to Canvas API",
   "main": "build/compodraw.js",
   "types": "types/index.d.ts",

diff --git a/src/renderer/draw.ts b/src/renderer/draw.ts
@@ -5,12 +5,19 @@ import { Instruct } from "../interfaces";
  *
  * @param composed Typically a group of instructions
  * @param canvasDOM Targeted canvas element
+ * @param isResponsive Set to false if canvas behaves weird
  */
-export function draw(composed: Instruct, canvasDOM: HTMLCanvasElement): void {
+export function draw(
+  composed: Instruct,
+  canvasDOM: HTMLCanvasElement,
+  isResponsive: boolean = true
+): void {
   if (!canvasDOM) return;
 
-  canvasDOM.width = canvasDOM.clientWidth * window.devicePixelRatio;
-  canvasDOM.height = canvasDOM.clientHeight * window.devicePixelRatio;
+  if (isResponsive) {
+    canvasDOM.width = canvasDOM.clientWidth * window.devicePixelRatio;
+    canvasDOM.height = canvasDOM.clientHeight * window.devicePixelRatio;
+  }
 
   if (typeof canvasDOM.getContext === "function") {
     const canvasCtx = canvasDOM.getContext("2d");