From 3030728bb1d86cd706bbffc0a3bfbedda79fedeb Mon Sep 17 00:00:00 2001
From: Athaariq Ardhiansyah <athaariqa@gmail.com>
Date: Thu, 20 May 2021 02:25:37 +0700
Subject: [PATCH] fix: Scaling problem on non-responsive webpage

---
 package.json         |  2 +-
 src/renderer/draw.ts | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index fc74b55..f7d5290 100644
--- 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
index 2b3a8dc..6e58b9b 100644
--- 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");