JavaScript HTML Game Development Tutorial 2 - Drawing Stretched and Rotated Sprites on Canvas

Source code: This is my next HTML canvas game engine tutorial in the series. So let’s continue our journey on our way to learning how to develop a 2D tile mapped HTML game engine (In the style of Mario platformer, but with a few unique twists of our own.) This Java Script game development tutorial was created to help learn how to draw image sprites / pictures on JavaScript canvas, in preparation to making your first JavaScript game engine. First we will make sure our canvas is set up, this is a must for game dev. as we deviate from HTML div element-based sprites you may already be familiar with. (We want to use HTML5 canvas tag this time, not DIV elements as sprites!) JavaScript objects are important. And so, after our JavaScript canvas has been set up, we will create a new JavaScript object conveniently called “Sprite“ and add methods draw and rotate. Original size, stretched and rotated 2D tiles (32 by 32 pixels) are covered. It’s a good gamedev tutorial if you’re starting
Back to Top