Spring 2017, Week 8: Canvas

This week’s workshop dives into different aspects of drawing with canvas. Since this workshop covers a wide territory, we will not be able to deal with each topic in depth. Below are a list of additional links, grouped by topic, that you can explore.

Canvas Basics

MDN’s excellent tutorials are a great introduction to drawing with canvas. In particular, please review the following topics to ensure familiarity. You’ll also get to practice with these through the assignment.

• Basic shapes and path commands
• Styles
• Path2D
• Basic animation

Not part of the canvas API, but requestAnimationFrame is another key API used in canvas animations.

Canvas and d3 Generators

In v4, d3’s line, area, geoPath, and other path generators all support rendering to canvas. Here is a basic example:

Canvas Line

(Highly recommended) This excellent post by Irene Ros at Bocoup talks about three different approaches to translating d3’s data-to-DOM binding pattern to canvas.

Working with D3.js and Canvas: When and How - data visualization, design, tutorial - Bocoup

(Advanced) Canvas and Interaction

Because the canvas element is basically a bitmap image, it’s hard to distinguish what is “inside” vs. “outside” a shape. This poses challenges for designing for interactions. The following example shows how mousepicking works with canvas, using d3.quadtree.

https://bl.ocks.org/veltman/1b43f61887e89c371f1c8c73341540a3

Git repo

GitHub - viztech/2017-spring-week-8

Slides