title: How to draw image from URL on canvas with original quality
body: <p>I want to load an image from url and draw it on my canvas. My canvas takes full window size and I only want the image to be shown on the mouse position with a size of 100x100. Below is my code:</p>
  
  <pre><code>drawImage(imageUrl) {
      const ctx = this.canvas.getContext('2d');
      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      const image = new Image();
      image.onload = () =&gt; {
        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';
  
    }
  </code></pre>
  
  <p>the image can be drawn on the web page but the quality is pretty low. Below is the orianl image from above link:</p>
  
  <p><a href="https://i.stack.imgur.com/M9pWp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M9pWp.png" alt="enter image description here"></a></p>
  
  <p>below is the image is shown on my canvas:</p>
  
  <p><a href="https://i.stack.imgur.com/S6y3Y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/S6y3Y.png" alt="enter image description here"></a></p>
  
  <p>You can compare two images and their quality is quite different. How can I draw a high quality of the image on canvas?</p>