Watercolor map style with Canvas

Although the original watercolor map is made of pre-rendered tiles, instricate raster map rendering on the fly in a browser is gradually becoming practical as Canvas becomes more capable, and libraries like D3 make it easy to render vector data to raster graphics. A partial duplication of some of Stamen's watercolor processes, this time using D3 and Canvas, is a great exercise to hint at what's possible and spur some new creative ideas in our web maps.

This watercolor map notebook on Observable does that, looking back at Stamen's techniques as described by the late Zach Watson. (There is further explanation of paint and texture from Geraldine Sarmiento.) It needs to be viewed in the Chrome browser, as some Canvas techniques implemented are experimental and not supported by all browsers.

Advanced map rendering with Canvas tends to involve drawing the same shapes many times as layers and masks are built up, and thus performance may still limit what we can do in realtime without even more advanced technology (WebGL?), but the possibilities are vast and fun nonetheless! Play around with the notebook to see just one example!

Related Project:

No items found.
From the Blog