HTML5: Adding an image as a canvas element

Question

Based off this HTML5/JS game tutorial, I'm trying to change the "player" from just a simple color to an image.

How do I add an image to a canvas element?

The code that I'm trying to edit is this part right here:

 player.x += player.velX; player.y += player.velY; ctx.fill(); ctx.fillStyle = "green"; ctx.fillRect(player.x, player.y, player.width, player.height); requestAnimationFrame(update); 

Answer 1

player.x += player.velX;
player.y += player.velY;

var img = new Image();
img.src = "linkToYourImage.jpg";
//Can be any extension (png, etc.)

ctx.drawImage(img, player.x, player.y, player.width, player.height);

requestAnimationFrame(update);

See more options here: https://www.w3schools.com/tags/canvas_drawimage.asp