0
213
VistasText stroke not aligned with fill in Chrome canvas using Google fonts
When drawing text to a canvas using certain Google fonts such as Italianno, the text's stroke doesn't line up with the text's fill when viewed in Chrome on PC (Android Chrome and other browsers render the text correctly).
Strangely, this issue only appears at certain font sizes (increasing the size to 400px for example fixes the issue).
const canvas = document.getElementById('c1');
const ctx = canvas.getContext('2d');
document.fonts.load('300px Italianno').then(function() {
ctx.font = '300px Italianno';
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.strokeText('27', 40, 150);
ctx.fillText('27', 40, 150);
});<link href="https://fonts.googleapis.com/css?family=Italianno:400.css" rel="stylesheet" />
<canvas id='c1' width='300' height='200'></canvas>
·
Juan Pablo Isaza
Responde la pregunta