Javascript Presentation 2

Canvas Presentation

Cancel Next

This demonstration is sparked by a problem I had in the past. I wrote a WEB page at http://gustave.wallanbaldwin.com/?369098752 which has a map. The user has the option of zooming or panning. This was done on the server, although I thought at the time it would be much better, particularly with a dialup line, if I could just download the data, and draw the map on the client.

While I was surfing the WEB I ran across the WEB page at http://www.whatwg.org/specs/web-apps/current-work . This contains a preliminary specification for HTML 5. Among other things, there is a canvas element specified. I tried it out on the browser I use, foxfire, and it worked. Therefore, I decided to run a trial to see what could be done.

I tried it using the Konqueror browser, and it didn't work. I don't know if it works on IE or not. Therefore, I decided to write a display that would allow me to used either the client if canvas is available, or the server if it is not. This required me to know if the Canvas is implemented, so I have to include a test to see if canvas exists. Also, I need to load the image only if the canvas is not available.

This is a presentation of the canvas element, not the drawing program.

One particular problem that came up is that the canvas specifications don't include any characters. Since places are labeled on the map, I needed to have characters. This was solved by having seperate character (span) elements, which could be displayed on top of the canvas. This is made more complicated by the fact that the position of the characters change depending on the zoom and the pan.