diff --git a/src/Environment.ts b/src/Environment.ts
index f9b035e2b..752f1d5f8 100644
--- a/src/Environment.ts
+++ b/src/Environment.ts
@@ -89,6 +89,12 @@ export class Environment {
      * The font size of the music font in pixel. 
      */
     public static readonly MusicFontSize = 34;
+
+    /**
+     * The scaling factor to use when rending raster graphics for sharper rendering on high-dpi displays. 
+     */
+    public static HighDpiFactor = 1;
+
     /**
      * @target web
      */
@@ -530,6 +536,8 @@ export class Environment {
               };
 
         if (!Environment.isRunningInWorker) {
+            Environment.HighDpiFactor = window.devicePixelRatio;
+
             let vbAjaxLoader: string = '';
             vbAjaxLoader += 'Function VbAjaxLoader(method, fileName)' + '\r\n';
             vbAjaxLoader += '    Dim xhr' + '\r\n';
diff --git a/src/platform/javascript/Html5Canvas.ts b/src/platform/javascript/Html5Canvas.ts
index 0d36ce4b0..c034ebf0a 100644
--- a/src/platform/javascript/Html5Canvas.ts
+++ b/src/platform/javascript/Html5Canvas.ts
@@ -1,3 +1,4 @@
+import { Environment } from '@src/Environment';
 import { Color } from '@src/model/Color';
 import { Font, FontStyle } from '@src/model/Font';
 import { MusicFontSymbol } from '@src/model/MusicFontSymbol';
@@ -45,12 +46,13 @@ export class Html5Canvas implements ICanvas {
 
     public beginRender(width: number, height: number): void {
         this._canvas = document.createElement('canvas');
-        this._canvas.width = width | 0;
-        this._canvas.height = height | 0;
+        this._canvas.width = (width * Environment.HighDpiFactor) | 0;
+        this._canvas.height = (height  * Environment.HighDpiFactor) | 0;
         this._canvas.style.width = width + 'px';
         this._canvas.style.height = height + 'px';
         this._context = this._canvas.getContext('2d')!;
         this._context.textBaseline = 'hanging';
+        this._context.scale(Environment.HighDpiFactor, Environment.HighDpiFactor);
         this._context.lineWidth = this._lineWidth;
     }
 
diff --git a/test/visualTests/VisualTestHelper.ts b/test/visualTests/VisualTestHelper.ts
index 9c2362e12..c4e644621 100644
--- a/test/visualTests/VisualTestHelper.ts
+++ b/test/visualTests/VisualTestHelper.ts
@@ -72,6 +72,7 @@ export class VisualTestHelper {
 
             settings.core.fontDirectory = CoreSettings.ensureFullUrl('/base/font/bravura/');
             settings.core.engine = 'html5';
+            Environment.HighDpiFactor = 1; // test data is in scale 1
             settings.core.enableLazyLoading = false;
 
             let referenceFileData: Uint8Array;