Skip to content

Commit 80565d1

Browse files
gtklockerjondavidjohn
authored andcommitted
Fix race condition with fillText/strokeText.
This commit fixes the race condition where if you executed fillText or strokeText more than once you would be using the previously scaled font size property. Let's consider this example: ctx.font = '12pt Tahoma'; ctx.fillText('Hello', 0, 0); // ctx.font changes to ratio * font_size ctx.fillText('Hello', 0, 0); // ctx.font changes to ratio^2 * font_size The first fillText would be rendered with ratio * font_size, but since the font size property stays multiplied, on the next execution it will be multiplied again, causing a further multiplied version to appear. The solution employed —since canvas works this way and you can't explicitly set a font with a fillText call— is to multiply the font size, execute the fillText function and then divide by the ratio. This way, the font size stays intact.
1 parent 5c30ed6 commit 80565d1

File tree

1 file changed

+16
-2
lines changed

1 file changed

+16
-2
lines changed

src/CanvasRenderingContext2D.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,14 @@
7878
}
7979
);
8080

81-
return _super.apply(this, args);
81+
_super.apply(this, args);
82+
83+
this.font = this.font.replace(
84+
/(\d+)(px|em|rem|pt)/g,
85+
function(w, m, u) {
86+
return (m / ratio) + u;
87+
}
88+
);
8289
};
8390
})(prototype.fillText);
8491

@@ -97,7 +104,14 @@
97104
}
98105
);
99106

100-
return _super.apply(this, args);
107+
_super.apply(this, args);
108+
109+
this.font = this.font.replace(
110+
/(\d+)(px|em|rem|pt)/g,
111+
function(w, m, u) {
112+
return (m / ratio) + u;
113+
}
114+
);
101115
};
102116
})(prototype.strokeText);
103117
})(CanvasRenderingContext2D.prototype);

0 commit comments

Comments
 (0)