Tuesday, November 25th, 2008
Ernest is up to his old canvas tricks again. This time he has published a car navigation demo that lets you drive around a set of tiles from a map (Google Maps, OpenStreetMap) and it paints your course at the same time.
How did he do it?
The key of the whole implementation is the use of the drawImage method for canvas. The fact that this method can take two possible source elements (an image element or another existing canvas element in the document) allows you to create very nice features like cropping images, image distortion or even a copy/paste selection feature as the one in photoshop.
In this case, Joshua already did the hard work of using the drawImage multiple times to split the original image into horizontal strips and then create the 3D effect. Another example of this technique is the one I did to create the Quicktime VR-style panorama effect using vertical strips instead.
For the car navigation map we have added an extra step to create the source image from the nine openstreetmap tiles. Merging first the tiles to a temporary canvas and then using this temporary canvas as the source of the final 3D map.
There’s still more room to play around with it like improving the camera view or porting the collision system of the Mario Kart example.
A common issue some users find the first time they play with the canvas tag is the same origin policy which will prevent one from exporting the canvas to an image (using the toDataURL method) if the drawImage method uses images from another place. In order to solve that we need to proxy the images first.
Posted by Dion Almaer at 8:01 am