Canvascape – “3D Walker” is a game being developed using the new <canvas> tag in Firefox. The tag is also available in Safari (have not tested) and Opera. In Opera the game is very slow and takes up a 50% – 70% of CPU usage.
The game is more like a proof of concept. At the moment you can just move around the small map and jump. You are holding a gun but can not fire it. Anyway the textured one looks a lot like Wolf 3d.
A bit about the <canvas> tag. Apple first introduced it in its Dashboard which is based on Safari. It is an extension (non standard?) of HTML. The tag is similar to an <img> tag but here you can dynamically draw the image. Mozilla later implemented it in XUL a little later in HTML.
Apple: “Safari, Dashboard, and any Web Kit–based application can do arbitrary drawing of content using the canvas tag—a Web Kit extension introduced in Mac OS X version 10.4. This extension lets you reserve an area of your web page or widget and use rendering calls like those found in Quartz to paint complex paths and shapes in that area. The canvas tag is an HTML extension that you include in your HTML page to specify where you want drawing to occur.“
Mozilla XUL: “The canvas allows customized drawing as well as control over layout and positioning of children. With this, it at least provides some fallback when XUL or Gecko doesn’t support some widget or layout feature directly, such that developers can implement it themselves. The canvas tag was intended to be used in connection with XBL to create custom tags.“
Mozilla HTML: “With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WhatWG canvas specification, which itself is based on Apple’s <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client. <canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We’ll focus on the 2D rendering context (incidentally, the only currently defined rendering context). In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will eventually be added to the <canvas> specification.“
Well what is the use of this new tag? I guess we can see ads (even though we don’t want to, AdBlock will eventually filter this), better (or worse) site navigation, simple games etc… Wait a minute didn’t we have all of these with Flash? Wasn’t SVG supposed to do this too? Hmmm…
Related posts:
- IE Tab: Embedding Internet Explorer in tabs of Firefox
- AdBlock for every browser
- New Eclipse Projects: DTP, STP and Mascara
- Firefox does not want to be my default browser!
- Firefox is my default browser now!
starwed
November 29, 2005 at 4:39 PM
Well, the canvas tag is a much lower level construct than SVG, isn’t it? You could use it as a rendering context for something like OpenGL.
It doesn’t seem as useful on the web as SVG, but it could be quite useful for people developing moz based apps.
Vasanth
November 29, 2005 at 6:12 PM
I thinks so. Anyway I hope people put it to good use.