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

Posted in web development | Tagged , , | Leave a comment

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

Posted in javascript | Tagged , , | 3 Comments

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

Posted in web development | Tagged , , | 5 Comments

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

Posted in web development | Tagged , , , | Leave a comment

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

Posted in web development | Tagged , , | 4 Comments

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

Posted in web development | Tagged , , | Leave a comment

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

Posted in web development | Tagged , , | 3 Comments

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

Posted in HTML/CSS | Tagged , , , | 5 Comments

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

Posted in web development | Tagged , , | Leave a comment

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

Posted in web development | Tagged , , | 1 Comment