Javascript 如何从画布上的URL绘制具有原始质量的图像

我想从url加载一个图像并在画布上绘制它。我的画布采用全窗口大小，我只希望图像显示在鼠标位置，大小为100x100。下面是我的代码：

drawImage(imageUrl) {
    const ctx = this.canvas.getContext('2d');
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    const image = new Image();
    image.onload = () => {
      ctx.imageSmoothingEnabled = false;
      ctx.drawImage(image, this.state.mousePos.x, this.state.mousePos.y,
        100, 100);
    };
    image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';

  }

图像可以在网页上绘制，但质量相当低。下面是上面链接中的原始图像：

下面是我的画布上显示的图像：

你可以比较两幅图像，它们的质量是完全不同的。如何在画布上绘制高质量的图像？

let canvas=document.getElementById（'c'），ctx=canvas.getContext（'2d'）；
常量图像=新图像（）；
image.onload=（）=>{
ctx.imageSmoothingEnabled=假；
clearRect（0，0，canvas.width，canvas.height）；
ctx.drawImage（图像，50500500）；
};
image.src=https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66';
画布{
边框：2件纯黑；
}
图像的宽度和高度定义得很好？将其设为158 X 158以避免对锯齿进行重新采样。如果没有细微的颜色渐变，也可以使用别名设置。从CSS应用到画布的宽度和高度会拉伸画布，但您没有提供该信息。