Playing Around With HTML5’s Canvas Element

After reading up a on HTML5’s canvas element, I decided to re-tool the game I was working on to work inside of a canvas element. This was because the canvas element provides some great drawing functionality. You can resize, rotate, crop, position and alter the pixels of images you use on the canvas.

FireFox

FireFox Appears to Have the Best Support for the Canvas Element
Photo By M i x y

The game is still not done, however, I’ve uploaded another demo that shows the space ship and its main bad guy. You can use the arrow keys for movement and the “s” key to shoot. I changed the shoot key from the Space Bar to “s” because Opera was giving me issues when the Space Bar was pressed while the canvas had the focus.

Also, unlike last time, the game works best in FireFox, and basically sucks in everything else. Opera and Chrome can run the demo, but the frame rate is painfully slow. Since IE doesn’t support the canvas element yet, I’m using the JavaScript library Explorer Canvas to emulate it. Though you have to be using IE8 and be in “Quirks Mode” for it to work – and even then, the game is unplayably slow. Since the canvas element is part of the new standard, and one of its hyped uses is for creating games, I’m assuming / hoping that its performance is going to improve over the next couple of months in these browsers. However, since the canvas element is so cool, I’m still going to finish this game off even if it only works in FireFox.

For those of you interested in using the canvas element, Mozilla has a really good tutorial on it here, and there are some neat canvas game-themed tutorials here.

Lastly, and on a completely different note, I’ve written an update to the Is Someone Pretending To Be You Online? post I made a year ago. The update is at the bottom of the post and basically says the problem was due to a database error (which was a relief). I didn’t do an update right away since I didn’t want to embarrass the site owner.

2 thoughts on “Playing Around With HTML5’s Canvas Element”

  1. Here are a couple of interesting sites:

    http://processingjs.org/ — A Javascript Port of the Processing language. Uses canvas element for drawing, but has a much cleaner API, IMO.

    http://raphaeljs.com/ — A javascript library that I just discovered yesterday. Apparently uses SVG and VML for drawing. The advantage to that is you can get DOM events on the elements you create, probably resulting in better performance.

  2. hey Sloat,

    I keep hearing about Raphael every so often. I bookmarked the site a few months ago, but then never followed up and looked at it. It looks pretty cool, especially the bouncing ball demo on their site. I haven’t yet looked into how to do sound, so that’s definitely something I should look into more.

    I’m not sure ProcessingJS is for me. I’m not a big fan of Java-like syntax when doing JavaScript, I like it more when the libraries keep JavaScript’s look and feel.

    Anyway, thanks for the links.

Comments are closed.