Javascript JS画布一些笔划样式的文本呈现得很奇怪

只需使用js简单地在画布上绘制一些文本

但有一个问题。一些文字在其顶部有锐化的东西

像‘M’字

这是

云你告诉我这是什么，为什么会发生

来源

window.onload = () => {
  const canvas = document.getElementById('testCan');
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  console.log('context', context);

  //context.font = `normal 5ex "Roboto"`;

  context.fillStyle = '#fff';
  context.strokeStyle = '#000';
  context.lineWidth = 2;
                context.fillStyle = "white";
                context.textBaseline = "top";
                context.strokeStyle = 'black';

  context.strokeText('HIJKMNL', 0, 0);
  context.fillText('HIJKMNL', 0, 0);

  context.fillStyle = '#fff';
  
  function draw() {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);

    context.font = `normal 1.76ex "Roboto"`;
    context.lineWidth = 2.216666666666667;
    context.textBaseline = "top";
    context.strokeStyle = 'rgba(51, 51, 51, 0.7)';

    context.strokeText('ЯEMIND2020ЯEMIND2020ЯEMIND', 0, 120);
    context.fillText('ЯEMIND2020ЯEMIND2020ЯEMIND', 0, 120);
    context.strokeText('ЯEMIND2020ЯEMIND2020ЯEMIND', 0, 140);
    
    
    context.font = `normal 1.76ex serif`;
    context.lineWidth = 2.216666666666667;
    context.textBaseline = "top";
    context.strokeStyle = 'rgba(51, 51, 51, 0.7)';

    context.strokeText('ЯEMIND2020ЯEMIND2020ЯEMIND', 0, 200);
    context.fillText('ЯEMIND2020ЯEMIND2020ЯEMIND', 0, 200);
    context.strokeText('ЯEMIND2020ЯEMIND2020ЯEMIND', 0, 220);
    
    requestAnimationFrame(draw);
  }
  requestAnimationFrame(draw);
}