diff --git a/packages/survey-angular-ui/src/questions/signature.component.html b/packages/survey-angular-ui/src/questions/signature.component.html
index 46a0a59a29..975bad34b2 100644
--- a/packages/survey-angular-ui/src/questions/signature.component.html
+++ b/packages/survey-angular-ui/src/questions/signature.component.html
@@ -1,9 +1,9 @@
 <div
 [class]="model.cssClasses.root"
-[style.height]="model.signatureHeight + 'px'" [style.width]="model.signatureWidth + 'px'" #contentElement>
+[style.width]="model.renderedCanvasWidth" #contentElement>
 <div [class]="model.cssClasses.placeholder" [visible]="model.needShowPlaceholder()" [model]="$any(model).locPlaceholder" sv-ng-string></div>
 <div>
-  <img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [width]="model.signatureWidth" [height]="model.signatureHeight" [class]="model.cssClasses.backgroundImage">
+  <img *ngIf="!!model.backgroundImage" [src]="model.backgroundImage" [style.width]="model.renderedCanvasWidth" [class]="model.cssClasses.backgroundImage">
   <canvas tabindex="0" [class]="model.cssClasses.canvas"></canvas>
 </div>
 <div [class]="model.cssClasses.controls" [visible]="model.canShowClearButton">
diff --git a/packages/survey-vue3-ui/src/Signaturepad.vue b/packages/survey-vue3-ui/src/Signaturepad.vue
index a368071203..69db109fb3 100644
--- a/packages/survey-vue3-ui/src/Signaturepad.vue
+++ b/packages/survey-vue3-ui/src/Signaturepad.vue
@@ -3,8 +3,7 @@
     :class="question.cssClasses.root"
     ref="root"
     v-bind:style="{
-      height: question.signatureHeight + 'px',
-      width: question.signatureWidth + 'px',
+      width: question.renderedCanvasWidth,
     }"
   >
     <div
@@ -18,8 +17,9 @@
         v-if="question.backgroundImage"
         :class="question.cssClasses.backgroundImage"
         :src="question.backgroundImage"
-        :width="question.signatureWidth"
-        :height="question.signatureHeight"
+        v-bind:style="{
+          width: question.renderedCanvasWidth,
+        }"
       />
       <canvas tabindex="0" :class="question.cssClasses.canvas"></canvas>
     </div>
diff --git a/src/defaultV2-theme/blocks/sd-signaturepad.scss b/src/defaultV2-theme/blocks/sd-signaturepad.scss
index 18ec6b3ce2..83e9c9d739 100644
--- a/src/defaultV2-theme/blocks/sd-signaturepad.scss
+++ b/src/defaultV2-theme/blocks/sd-signaturepad.scss
@@ -25,7 +25,6 @@
     }
 }
 
-.sd-signaturepad__canvas,
 .sd-signaturepad__background-image {
     position: absolute;
     top: 0;
diff --git a/src/knockout/templates/question-signaturepad.html b/src/knockout/templates/question-signaturepad.html
index 884d66f932..f07222be62 100644
--- a/src/knockout/templates/question-signaturepad.html
+++ b/src/knockout/templates/question-signaturepad.html
@@ -1,14 +1,14 @@
 <script type="text/html" id="survey-question-signaturepad">
-    <div data-bind="css: question.cssClasses.root, style: { height: signatureHeight, width: signatureWidth }">
+    <div data-bind="css: question.cssClasses.root, style: { width: question.renderedCanvasWidth }">
         <div data-bind="css: question.cssClasses.placeholder, visible: $data.needShowPlaceholder()">
             <!-- ko template: { name: 'survey-string', data: question.locPlaceholder } -->
             <!-- /ko -->
         </div>
         <div>
             <!-- ko if: question.backgroundImage -->
-            <img data-bind="attr: { src: question.backgroundImage, width: question.signatureWidth, height: question.signatureHeight }, css: question.cssClasses.backgroundImage">
+            <img data-bind="attr: { src: question.backgroundImage}, style: { width: question.renderedCanvasWidth }, css: question.cssClasses.backgroundImage">
             <!-- /ko -->
-            <canvas tabindex='0' data-bind="css: question.cssClasses.canvas"></canvas>
+            <canvas tabindex='0' data-bind="css: question.cssClasses.canvas" ></canvas>
         </div>
         <!-- ko if: question.canShowClearButton -->
         <div data-bind="css: question.cssClasses.controls">
diff --git a/src/question_signaturepad.ts b/src/question_signaturepad.ts
index b980b29fc9..22ce6d13f0 100644
--- a/src/question_signaturepad.ts
+++ b/src/question_signaturepad.ts
@@ -8,40 +8,11 @@ import { SurveyModel } from "./survey";
 import { ISurveyImpl } from "./base-interfaces";
 import { ConsoleWarnings } from "./console-warnings";
 import { ITheme } from "./themes";
+import { classesToSelector } from "./utils/utils";
 
 var defaultWidth = 300;
 var defaultHeight = 200;
 
-export function getCanvasRatio(canvas: HTMLCanvasElement): number {
-  var context: any = canvas.getContext("2d");
-  var devicePixelRatio = window.devicePixelRatio || 1;
-  var backingStoreRatio =
-    context.webkitBackingStorePixelRatio ||
-    context.mozBackingStorePixelRatio ||
-    context.msBackingStorePixelRatio ||
-    context.oBackingStorePixelRatio ||
-    context.backingStorePixelRatio ||
-    1;
-
-  return devicePixelRatio / backingStoreRatio;
-}
-
-function resizeCanvas(canvas: HTMLCanvasElement) {
-  var context: any = canvas.getContext("2d");
-  var ratio = getCanvasRatio(canvas);
-
-  var oldWidth = canvas.width;
-  var oldHeight = canvas.height;
-
-  canvas.width = oldWidth * ratio;
-  canvas.height = oldHeight * ratio;
-
-  canvas.style.width = oldWidth + "px";
-  canvas.style.height = oldHeight + "px";
-
-  context.scale(ratio, ratio);
-}
-
 /**
  * A class that describes the Signature question type.
  *
@@ -77,7 +48,9 @@ export class QuestionSignaturePadModel extends Question {
       const format = this.dataFormat === "jpeg" ? "image/jpeg" :
         (this.dataFormat === "svg" ? "image/svg+xml" : "");
       var data = this.signaturePad.toDataURL(format);
+      this.valueIsUpdatingInternally = true;
       this.value = data;
+      this.valueIsUpdatingInternally = false;
     }
   }
 
@@ -103,10 +76,48 @@ export class QuestionSignaturePadModel extends Question {
       this.updateColors(this.signaturePad);
     }
   }
+  private canvas: any;
+  private scale: number;
+  private valueIsUpdatingInternally: boolean = false;
+
+  private scaleCanvas(refresh: boolean = true) {
+    const canvas = this.canvas;
+    if (canvas.width != this.containerWidth) canvas.width = this.containerWidth;
+    if (canvas.height != this.containerHeight) canvas.height = this.containerHeight;
+    const scale = canvas.offsetWidth / canvas.width;
+    if (this.scale != scale) {
+      this.scale = scale;
+      canvas.style.width = this.renderedCanvasWidth;
+      this.signaturePad.minWidth = this.penMinWidth * scale;
+      this.signaturePad.maxWidth = this.penMaxWidth * scale;
+      canvas.getContext("2d").scale(1 / scale, 1 / scale);
+
+      if (refresh) this.refreshCanvas();
+    }
+  }
+  private refreshCanvas() {
+    var data = this.value;
+    const canvas = this.canvas;
+    if (!data) {
+      canvas.getContext("2d").clearRect(0, 0, canvas.width * this.scale, canvas.height * this.scale);
+      this.signaturePad.clear();
+    } else {
+      this.signaturePad.fromDataURL(data, { width: canvas.width * this.scale, height: canvas.height * this.scale });
+    }
+  }
+
+  private updateValueHandler = () => {
+    this.scaleCanvas(false);
+    this.refreshCanvas();
+  };
 
   initSignaturePad(el: HTMLElement) {
     var canvas: any = el.getElementsByTagName("canvas")[0];
+    this.canvas = canvas;
+    canvas.width = this.containerWidth;
+    canvas.height = this.containerHeight;
     var signaturePad = new SignaturePad(canvas, { backgroundColor: "#ffffff" });
+    this.signaturePad = signaturePad;
     if (this.isInputReadOnly) {
       signaturePad.off();
     }
@@ -122,6 +133,7 @@ export class QuestionSignaturePadModel extends Question {
     this.updateColors(signaturePad);
 
     (signaturePad as any).addEventListener("beginStroke", () => {
+      this.scaleCanvas();
       this.isDrawingValue = true;
       canvas.focus();
     }, { once: false });
@@ -131,23 +143,11 @@ export class QuestionSignaturePadModel extends Question {
       this.updateValue();
     }, { once: false });
 
-    var updateValueHandler = () => {
-      var data = this.value;
-      canvas.width = this.signatureWidth || defaultWidth;
-      canvas.height = this.signatureHeight || defaultHeight;
-      resizeCanvas(canvas);
-      if (!data) {
-        signaturePad.clear();
-      } else {
-        signaturePad.fromDataURL(data);
-      }
-    };
-    updateValueHandler();
+    this.updateValueHandler();
     this.readOnlyChangedCallback();
-    this.signaturePad = signaturePad;
     var propertyChangedHandler = (sender: any, options: any) => {
       if (options.name === "signatureWidth" || options.name === "signatureHeight" || options.name === "value") {
-        updateValueHandler();
+        if (!this.valueIsUpdatingInternally) this.updateValueHandler();
       }
     };
     this.onPropertyChanged.add(propertyChangedHandler);
@@ -195,6 +195,38 @@ export class QuestionSignaturePadModel extends Question {
   public set signatureHeight(val: number) {
     this.setPropertyValue("signatureHeight", val);
   }
+  /**
+   * Specifies whether the signature area should be scaled to fit into the question width.
+   *
+   * Default value: `false`
+   *
+   * > The signature area is scaled only for display. The resulting image will have dimensions specified by the [`signatureHeight`](#signatureHeight) and [`signatureWidth`](#signatureWidth) properties.
+   */
+  @property({ defaultValue: false }) signatureAutoScaleEnabled: boolean;
+  /**
+   * Speicifies the minimum width of pen strokes, measured in pixels.
+   *
+   * Default value: 0.5
+   */
+  @property({ defaultValue: 0.5 }) penMinWidth: number;
+  /**
+   * Speicifies the maximum width of pen strokes, measured in pixels.
+   *
+   * Default value: 2.5
+   */
+  @property({ defaultValue: 2.5 }) penMaxWidth: number;
+
+  private get containerHeight(): any {
+    return this.signatureHeight || defaultHeight;
+  }
+
+  private get containerWidth(): any {
+    return this.signatureWidth || defaultWidth;
+  }
+
+  public get renderedCanvasWidth(): string {
+    return this.signatureAutoScaleEnabled ? "100%" : this.containerWidth + "px";
+  }
 
   //todo: need to remove this property
   public get height(): number {
@@ -320,6 +352,21 @@ Serializer.addClass(
       category: "general",
       default: 200,
     },
+    {
+      name: "signatureAutoScaleEnabled:boolean",
+      category: "general",
+      default: false,
+    },
+    {
+      name: "penMinWidth:number",
+      category: "general",
+      default: 0.5,
+    },
+    {
+      name: "penMaxWidth:number",
+      category: "general",
+      default: 2.5,
+    },
     //need to remove this property
     {
       name: "height:number",
diff --git a/src/react/signaturepad.tsx b/src/react/signaturepad.tsx
index 173b4ec651..e46e687561 100644
--- a/src/react/signaturepad.tsx
+++ b/src/react/signaturepad.tsx
@@ -16,7 +16,7 @@ export class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
     var cssClasses = this.question.cssClasses;
     var clearButton = this.renderCleanButton();
     return (
-      <div className={cssClasses.root} ref={(root) => (this.setControl(root))} style={{ height: this.question.signatureHeight, width: this.question.signatureWidth }}>
+      <div className={cssClasses.root} ref={(root) => (this.setControl(root))} style={{ width: this.question.renderedCanvasWidth }}>
         <div
           className={cssClasses.placeholder}
           style={{ display: this.question.needShowPlaceholder() ? "" : "none" }}
@@ -35,7 +35,7 @@ export class SurveyQuestionSignaturePad extends SurveyQuestionElementBase {
   renderBackgroundImage(): JSX.Element | null {
     if(!this.question.backgroundImage) return null;
 
-    return <img className={this.question.cssClasses.backgroundImage} src={this.question.backgroundImage} width={this.question.signatureWidth} height= {this.question.signatureHeight}></img>;
+    return <img className={this.question.cssClasses.backgroundImage} src={this.question.backgroundImage} style={{ width: this.question.renderedCanvasWidth }}></img>;
   }
 
   renderCleanButton(): JSX.Element | null {
diff --git a/src/signaturepad.scss b/src/signaturepad.scss
index 8099a7376a..447ad775e7 100644
--- a/src/signaturepad.scss
+++ b/src/signaturepad.scss
@@ -1,5 +1,6 @@
 .sjs_sp_container {
     position: relative;
+    max-width: 100%;
 }
 .sjs_sp_controls {
     position: absolute;
@@ -25,11 +26,16 @@
     width: 100%;
     height: 100%;
 }
-
-.sjs_sp_canvas,
+.sjs_sp_canvas {
+    position: relative;
+    max-width: 100%;
+}
 .sjs_sp__background-image {
     position: absolute;
     top: 0;
     left: 0;
     object-fit: cover;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
 }
diff --git a/src/vue/signaturepad.vue b/src/vue/signaturepad.vue
index 7cf004124d..2aeb3f98fb 100644
--- a/src/vue/signaturepad.vue
+++ b/src/vue/signaturepad.vue
@@ -2,8 +2,7 @@
   <div
     :class="question.cssClasses.root"
     v-bind:style="{
-      height: question.signatureHeight + 'px',
-      width: question.signatureWidth + 'px',
+      width: question.renderedCanvasWidth,
     }"
   >
     <div :class="question.cssClasses.placeholder" v-show="question.needShowPlaceholder()">
@@ -11,7 +10,9 @@
     </div>
     <div>
       <img v-if="question.backgroundImage" :class="question.cssClasses.backgroundImage" :src="question.backgroundImage"
-      :width="question.signatureWidth" :height="question.signatureHeight">
+        v-bind:style="{
+          width: question.renderedCanvasWidth,
+        }">
       <canvas tabindex="0" :class="question.cssClasses.canvas"></canvas>
     </div>
     <div :class="question.cssClasses.controls" v-if="question.canShowClearButton">
diff --git a/tests/markup/etalon_signaturepad.ts b/tests/markup/etalon_signaturepad.ts
index c43b654ac5..9b12a10931 100644
--- a/tests/markup/etalon_signaturepad.ts
+++ b/tests/markup/etalon_signaturepad.ts
@@ -28,6 +28,21 @@ registerMarkupTests(
         ]
       },
       snapshot: "signaturepad-with-backgroundImage"
-    }
+    },
+    {
+      name: "Test Scaled Signaturepad question markup",
+      json: {
+        questions: [
+          {
+            type: "signaturepad",
+            name: "q1",
+            titleLocation: "hidden",
+            "backgroundImage": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+            signatureAutoScaleEnabled: true
+          }
+        ]
+      },
+      snapshot: "signaturepad-scaled"
+    },
   ]
 );
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-scaled.snap.html b/tests/markup/snapshots/signaturepad-scaled.snap.html
new file mode 100644
index 0000000000..ab2d0085b6
--- /dev/null
+++ b/tests/markup/snapshots/signaturepad-scaled.snap.html
@@ -0,0 +1,15 @@
+<div class="sjs_sp_container sv_q_signaturepad" style="width:100%;">
+	<div class="sjs_sp_placeholder">
+		<span class="sv-string-viewer">Sign here</span>
+	</div>
+	<div>
+		<img class="sjs_sp__background-image" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:100%;">
+			<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:100%;" tabindex="0" width="300">
+			</canvas>
+		</div>
+		<div class="sjs_sp_controls">
+			<button class="sjs_sp_clear" title="Clear" type="button">
+				<span>✖</span>
+			</button>
+		</div>
+	</div>
\ No newline at end of file
diff --git a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
index 9b85aa4b04..5d2f2c8a37 100644
--- a/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
+++ b/tests/markup/snapshots/signaturepad-with-backgroundImage.snap.html
@@ -1,8 +1,10 @@
-<div class="sjs_sp_container sv_q_signaturepad" style="height:200px; width:300px;">
-	<div class="sjs_sp_placeholder"><span class="sv-string-viewer">Sign here</span></div>
+<div class="sjs_sp_container sv_q_signaturepad" style="width:300px;">
+	<div class="sjs_sp_placeholder">
+		<span class="sv-string-viewer">Sign here</span>
+	</div>
 	<div>
-		<img class="sjs_sp__background-image" height="200" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" width="300">
-			<canvas class="sjs_sp_canvas" height="200" style="height:200px; user-select:none; width:300px;" tabindex="0" width="300">
+		<img class="sjs_sp__background-image" src="https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg" style="width:300px;">
+			<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="0" width="300">
 			</canvas>
 		</div>
 		<div class="sjs_sp_controls">
diff --git a/tests/markup/snapshots/signaturepad.snap.html b/tests/markup/snapshots/signaturepad.snap.html
index 084c63ce4a..7cf0228d72 100644
--- a/tests/markup/snapshots/signaturepad.snap.html
+++ b/tests/markup/snapshots/signaturepad.snap.html
@@ -1,7 +1,9 @@
-<div class="sjs_sp_container sv_q_signaturepad" style="height:200px; width:300px;">
-	<div class="sjs_sp_placeholder"><span class="sv-string-viewer">Sign here</span></div>
+<div class="sjs_sp_container sv_q_signaturepad" style="width:300px;">
+	<div class="sjs_sp_placeholder">
+		<span class="sv-string-viewer">Sign here</span>
+	</div>
 	<div>
-		<canvas class="sjs_sp_canvas" height="200" style="height:200px; user-select:none; width:300px;" tabindex="0" width="300">
+		<canvas class="sjs_sp_canvas" height="200" style="user-select:none; width:300px;" tabindex="0" width="300">
 		</canvas>
 	</div>
 	<div class="sjs_sp_controls">
diff --git a/tests/question_signaturepadtests.ts b/tests/question_signaturepadtests.ts
index c854a9abe9..8ef591ada7 100644
--- a/tests/question_signaturepadtests.ts
+++ b/tests/question_signaturepadtests.ts
@@ -1,5 +1,5 @@
 import { Serializer } from "../src/jsonobject";
-import { QuestionSignaturePadModel, getCanvasRatio } from "../src/question_signaturepad";
+import { QuestionSignaturePadModel } from "../src/question_signaturepad";
 import { SurveyModel } from "../src/survey";
 
 export default QUnit.module("question signaturepad");
@@ -104,7 +104,7 @@ QUnit.test("Check signaturepad signauteWidth/Height properties", (assert) => {
   const canvas = document.createElement("canvas");
   containerEl.appendChild(canvas);
   const signaturepad = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
-  const ratio = getCanvasRatio(canvas);
+  const ratio = 1;
   signaturepad.initSignaturePad(containerEl);
   assert.equal(signaturepad.signatureWidth, 300);
   assert.equal(signaturepad.signatureHeight, 200);
@@ -338,3 +338,30 @@ QUnit.test("check placeholder property visibility", (assert) => {
   q1.showPlaceholder = false;
   assert.equal(prop1.isVisible(undefined, q1), false);
 });
+
+QUnit.test("check rendered size properties", (assert) => {
+  const json = {
+    questions: [
+      {
+        type: "signaturepad",
+        name: "q1",
+        "penColor": "#ff0000"
+      },
+    ],
+  };
+  const containerEl = document.createElement("div");
+  const canvas = document.createElement("canvas");
+  containerEl.appendChild(canvas);
+  let survey = new SurveyModel(json);
+  let signaturepadQuestion = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
+  signaturepadQuestion.initSignaturePad(containerEl);
+
+  assert.equal(signaturepadQuestion.renderedCanvasWidth, "300px");
+
+  signaturepadQuestion.signatureWidth = 500;
+
+  assert.equal(signaturepadQuestion.renderedCanvasWidth, "500px");
+
+  signaturepadQuestion.signatureAutoScaleEnabled = true;
+  assert.equal(signaturepadQuestion.renderedCanvasWidth, "100%");
+});
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-clear.png b/visualRegressionTests/tests/defaultV2/etalons/signature-clear.png
new file mode 100644
index 0000000000..e923c99f40
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/signature-clear.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-data.png b/visualRegressionTests/tests/defaultV2/etalons/signature-data.png
new file mode 100644
index 0000000000..8d1459b9e2
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/signature-data.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-mobile.png b/visualRegressionTests/tests/defaultV2/etalons/signature-mobile.png
new file mode 100644
index 0000000000..b8f286980d
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/signature-mobile.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature-scaled.png b/visualRegressionTests/tests/defaultV2/etalons/signature-scaled.png
new file mode 100644
index 0000000000..1adba652f1
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/signature-scaled.png differ
diff --git a/visualRegressionTests/tests/defaultV2/etalons/signature.png b/visualRegressionTests/tests/defaultV2/etalons/signature.png
new file mode 100644
index 0000000000..ffe83b424f
Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/signature.png differ
diff --git a/visualRegressionTests/tests/defaultV2/signaturepad.ts b/visualRegressionTests/tests/defaultV2/signaturepad.ts
new file mode 100644
index 0000000000..e1ed85c280
--- /dev/null
+++ b/visualRegressionTests/tests/defaultV2/signaturepad.ts
@@ -0,0 +1,102 @@
+import { Selector, ClientFunction } from "testcafe";
+import { url, frameworks, initSurvey, url_test, wrapVisualTest, takeElementScreenshot } from "../../helper";
+
+const title = "Html Screenshot";
+
+fixture`${title}`.page`${url}`.beforeEach(async (t) => {
+
+});
+
+const applyTheme = ClientFunction(theme => {
+  (<any>window).Survey.StylesManager.applyTheme(theme);
+});
+
+const theme = "defaultV2";
+
+frameworks.forEach(framework => {
+  fixture`${framework} ${title} ${theme}`
+    .page`${url_test}${theme}/${framework}`.beforeEach(async t => {
+    await applyTheme(theme);
+  });
+  test("Signature resize to mobile", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        width: "900px",
+        questions: [
+          {
+            type: "signaturepad",
+            name: "q1",
+            signatureWidth: 500,
+            signatureHeight: 100,
+            penMinWidth: 5,
+            penMaxWidth: 5,
+          },
+        ]
+      });
+      await t.click("canvas", { offsetX: 50, offsetY: 80 });
+      await t.click("canvas", { offsetX: 70, offsetY: 50 });
+      await t.click("canvas", { offsetX: 90, offsetY: 20 });
+      await t.wait(100);
+
+      await takeElementScreenshot("signature.png", ".sd-question", t, comparer);
+      await t.resizeWindow(375, 400);
+      await t.click("canvas", { offsetX: 50, offsetY: 10 });
+      await t.click("canvas", { offsetX: 70, offsetY: 20 });
+      await t.click("canvas", { offsetX: 90, offsetY: 30 });
+      await t.wait(100);
+      await takeElementScreenshot("signature-mobile.png", ".sd-question", t, comparer);
+    });
+  });
+  test("Signature scaled", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        width: "900px",
+        questions: [
+          {
+            type: "signaturepad",
+            name: "q1",
+            signatureWidth: 500,
+            signatureHeight: 100,
+            penMinWidth: 5,
+            penMaxWidth: 5,
+            signatureAutoScaleEnabled: true
+          },
+        ]
+      });
+      await t.click("canvas", { offsetX: 40, offsetY: 10 });
+      await t.click("canvas", { offsetX: 370, offsetY: 50 });
+      await t.click("canvas", { offsetX: 700, offsetY: 90 });
+      await t.wait(100);
+      await takeElementScreenshot("signature-scaled.png", ".sd-question", t, comparer);
+      await t.click("button[title=\"Clear\"]");
+      await takeElementScreenshot("signature-clear.png", ".sd-question", t, comparer);
+    });
+  });
+  test("Signature update from value", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        width: "600px",
+        questions: [
+          {
+            type: "signaturepad",
+            name: "q1",
+            signatureWidth: 100,
+            signatureHeight: 100,
+            penMinWidth: 5,
+            penMaxWidth: 5,
+            signatureAutoScaleEnabled: true
+          },
+        ]
+      });
+
+      await ClientFunction(() => {
+        window["survey"].getQuestionByName("q1").value = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100' width='100'%3E%3Ccircle cx='50' cy='50' r='40' /%3E%3C/svg%3E";
+      })();
+
+      await takeElementScreenshot("signature-data.png", ".sd-question", t, comparer);
+    });
+  });
+});
\ No newline at end of file