元の画質でキャンバスにURLから画像を描画する方法

Question

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'; 

    } 

画像はWebページに描画できますが、画質はかなり低いです。以下は、上記のリンクからorianlの画像です：

あなたは2つの画像を比較することができ、その品質はかなり異なっている：以下

すると、イメージが私のキャンバス上に示されています。どのようにしてキャンバスに高品質の画像を描くことができますか？

Answer 1

let canvas = document.getElementById('c'),ctx = canvas.getContext('2d'); 
 
const image = new Image(); 
 
image.onload =() => { 
 
    ctx.imageSmoothingEnabled = false; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.drawImage(image, 50, 50,500,500); 
 
}; 
 
image.src = 'https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66';

canvas{ 
 
border : 2px solid black; 
 
}

<canvas id='c' width=500 height=500/>

あなたは、画像品質に中継した場合、SVGを使用してください。