Tag Archives: canvas
Prerender text for HTML5 canvas to speed up your code
If you’ve looked at HTML5’s canvas tag at all, then you’ve probably heard people mention prerendering elements on another canvas to speed up your code. The main reason to do this is the eliminate the need to draw the same … Continue reading
Draw a rectangle using the mouse on the canvas in less than 40 lines of JavaScript
One thing that is a lot easier than people think is using the mouse to interact with the canvas tag. To show how easy, I wrote some code that allows a user to draw a rectangle on the canvas. This … Continue reading
More advanced HTML5 canvas sprite sheet walk cycle animation
One of the key tricks that have been used for at least 30 years by game developers is using sprite sheets to animate characters. This can be done using the HTML5 canvas tag and I’ve talked about it on here … Continue reading
The less loops the better
If you’ve ever built a game, whether it’s a Flash game, a game for iOS or a game built using HTML5 canvas, you’ll know that the thing that makes the game run is loops. When I built my first Flash … Continue reading
How to use sprite sheets with HTML5 canvas
Sprite sheets have been a part of game development since the mid-70’s and there’s a reason they’re still being used today. It uses less memory and processor power because you can load all of a character’s positions and poses in … Continue reading
Pause your HTML5 canvas game
A feature that I think most games need is for the player to be able to pause the game. And it’s surprisingly easy to do this with a game built using the canvas tag and JavaScript. If you’ve been following … Continue reading
An easy way to optimize the HTML5 canvas element’s clearRect function
One of the main challenges in working with HTML5’s canvas element is really optimizing it because you’re dealing with two unknowns, the processing power of the user’s computer and the speed of their browser’s JavaScript engine. You can never know … Continue reading
Build a vertical scrolling shooter game with HTML5 canvas – Part 6
Part 1 – Game Basics Part 2 – Graphics and Lasers Part 3 – Laser Hit Test Part 4 – Ship Hit Test and Score Part 5 – Player Lives and Continue Button Part 6 – Font fixes and Start … Continue reading
It might be too early to build client work with canvas but that doesn’t mean it’s too early to learn
I’ve been asked a couple of times since HTML5’s canvas element isn’t that widely adopted yet, since versions of Internet Explorer that don’t support it still account for more than 50% of browser market share, why I spend so much … Continue reading
HTML5 Canvas: You don’t always have to clear the entire thing
When I first started working with the HTML5 canvas element, the one thing I found a bit frustrating was the fact that you had to clear the canvas and then redraw it. Coming from Flash, I wasn’t used to this … Continue reading