diff --git a/Backends/HTML5/kha/SystemImpl.hx b/Backends/HTML5/kha/SystemImpl.hx
index 015856e9c..64c3c1aa2 100644
--- a/Backends/HTML5/kha/SystemImpl.hx
+++ b/Backends/HTML5/kha/SystemImpl.hx
@@ -533,9 +533,22 @@ class SystemImpl {
if (canvas.getContext != null) {
if (lastCanvasClientWidth != canvas.clientWidth || lastCanvasClientHeight != canvas.clientHeight) {
+ // canvas.width is the actual backbuffer-size.
+ // canvas.clientWidth (which is read-only and equivalent to
+ // canvas.style.width in pixels) is the output-size
+ // and by default gets scaled by devicePixelRatio.
+ // We revert that scale so backbuffer and output-size
+ // are the same.
+
var scale = Browser.window.devicePixelRatio;
- canvas.width = Std.int(canvas.clientWidth * scale);
- canvas.height = Std.int(canvas.clientHeight * scale);
+ var clientWidth = canvas.clientWidth;
+ var clientHeight = canvas.clientHeight;
+ canvas.width = clientWidth;
+ canvas.height = clientHeight;
+ if (scale != 1) {
+ canvas.style.width = Std.int(clientWidth / scale) + "px";
+ canvas.style.height = Std.int(clientHeight / scale) + "px";
+ }
lastCanvasClientWidth = canvas.clientWidth;
lastCanvasClientHeight = canvas.clientHeight;
}