Loading the SVG both as a regular for drawing in canvas and as a element for accessing data means that we have to load it two times and hope the browser cache saves us from having to download it twice. Therefore, you have to hide all the special layers of the SVG (camera path and the like) before saving. svg files, you can’t modify the SVG with code before drawing. What we will need from it, for this project:īoth paths are simple… well, elements, that can be drawn with any Bézier curve tool or similar.ĭrawing SVG on canvas is simple, but comes with a caveat: you can only draw straight from actual. SVG + Canvasįirst, we need to prepare our map. So now let’s see how we can use both together. Moreover, we also need to get trail and point data, and SVG is a great candidate to store that information. On the contrary: to draw on the canvas, we need to get the map graphics from somewhere, and maps are perfectly suited for vector formats like SVG. That’s not to say we won’t use SVG at all, though.
It could be done purely with SVG, but at the time of writing, SVG rendering performance isn’t quite there yet, while canvas is hardware accelerated on most platforms. To make this map, we chose canvas for rendering for performance reasons. Find him on Instagram, Twitter, Flickr and VSCO. The photography is courtesy of Dan Rubin who has travelled to Iceland and has taken some incredible shots that we used in the demo. Attention: This is a highly experimental project and it might not work in all browsers.
0 kommentar(er)
