Sprite animation on <canvas> without JS library

Question

Good afternoon. As the title says, I'm trying to animate a 2d spritesheet on a canvas element for a simple 2d game that I am making. I looked through almost a dozen articles and did not find what I was looking for, and these are instructions on how to do this without the help of any library. You can tell me, well, sir, you are crazy if you are not going to use this freely available technology that could make your life easier. My answer to this is that I do it for the sake of training, because I want to become a better javascript developer and grow to write bigger and better games. In this case, I think, my question is: how do I animate the sprite? (I want the player to be able to enter directions using the arrow keys) Make no mistake: I do not ask anyone to write a code for me, rather I ask where can I find resources to teach myself,how to do it my own. Thanks to everyone, really appreciate.

Answer 1

Answer: canvas + RequestAnimationFrame. Here is a great tutorial: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

I was looking for a html5 + javascript 2d project to join a few months ago. If you are interested, I would like to collaborate with you on this project. Just let me know and enjoy the tutorial.

You can create a simple animation loop creating a canvas in your html document:

<canvas id="cvs"></canvas>

This will be your "playground"

Then you can create a javascript file that defines the game engine. You can load an external image inside an image element as follows:

var myImage = new Image();
myImage.src = "my-sprite-animation.png";

:

var mySprite = sprite({
  context: canvas.getContext("2d"),
  width: 100,
  height: 100,
  image: coinImage
});

requestAnimationFrame :

function gameLoop () {
  window.requestAnimationFrame(gameLoop); 
  mySprite.update();
  mySprite.render();
}