Playing with Canvas: Starfields in Firefox

Saturday, February 17th, 2007

I’ve been itching to play with Canvas for a while now and tonight I finally had the time and energy to actually do something with it*.

Granted it’s very basic in terms of what Canvas can do, but I’ve been in love with starfields ever since I coded my first one years ago in Quick Basic and I’ve been dying to do one in JavaScript for a long time now. Canvas gave me the opportunity to generate and move real pixels around–instead of DOM elements!

For those of you who want to pick the code apart, note the easy instantiation of the Starfield class. With literally 3 lines of code you can add another starfield to the page. :-)

* In case you didn’t catch it in the post title, this only works in Safari and recent Gecko based browsers like Firefox and Opera.

Sphere: Related Content

Comments closed

5 Comments

Luke says:
February 17th, 2007 at 3:05 am
Pretty cool. It’s amazing what you can really do with Canvas. Did you see this yet:

http://www.abrahamjoffe.com.au/ben/canvascape/
Ara Pehlivanian says:
February 17th, 2007 at 9:18 am
Luke: Yeah, I’d seen it before. That’s what got me interested in Canvas in the first place, though I hadn’t caught his use of the “Google workaround for IE”. I’ll have to look into that. :-)
Nathan Smith says:
February 17th, 2007 at 3:04 pm
Very cool. One minor typo though: You have Safari listed as a Gecko-based browser, which it isn’t.
Ara Pehlivanian says:
February 17th, 2007 at 3:11 pm
Nathan: You’re right, I thought it sounded odd. It seems I misread the line in the Canvas tutorial. I mixed it up because it talks about how Apple first introduced it for the OSX dashboard then put it in Safari, and it was also adopted by Gecko 1.8 browsers. My bad. I’ll go fix it now. :-)
Luke says:
February 17th, 2007 at 7:50 pm
Actually, I don’t think Opera is gecko based either.

Opera can pass the ACID2 test, while FF and Moz fail it miserably. So they must have different rendering engines under the hood.