Why does the image stretch when animating in canvas?

Question

JavaScript

For some reason, when animating a picture, it stretches. What to do?

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

var bird = new Image();
var stop = new Image();

bird.src = "hero.png";
stop.src = "stopped.png";

var xPos = 100;
var yPos = 0;


function draw() {
  
  ctx.drawImage(stop, 300, 0);
  ctx.drawImage(bird, xPos, 0);
  
  xPos += 1;

  requestAnimationFrame(draw);
}

setTimeout(draw, 200)

<canvas id="canvas" width="1088px" height="912px"></canvas>
<script src="script.js"></script>

Answer 1

The draw function does not overwrite what has been drawn on the canvas.
Make the canvas clear before drawing pictures, for example, ctx.clearRect(0, 0, cvs.width, cvs.height);