Why is the image on canvas tag and tag img are different?

Note that in the images the img tag is perfect, but the canvas tag shows several bright pixels.

I converted the JPG to BMP and PNG, tested and the problem continues. This is my test image (this image was created by KIKO Software by extracting it from the other image posted in this question):

HTML simple code:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 0, 0, 300, 400);
});

<div style="display: flex;">
  <div style="margin-right:50px;">
    <img id="scream" width="300" src=".png">
    <h1>Using tag img</h1>
  </div>

  <div>
    <canvas id="myCanvas" width="297" height="400" style="border:1px solid grey;">
      Sorry, your browser does not support canvas.
    </canvas>
    <h1>Using tag canvas with drawImage</h1>
  </div>
</div>