Learn D3.js

Canvas rendering

All shape generators that create SVG path strings by default can be configured with a Canvas context. This will change the return type for the shape, which will no longer be a string, but a sequence of method calls on the context object.

The following D3 and Canvas code will produce the first diagram shown in this chapter (which was also generated in pure SVG and D3). This code is in Canvas/2-canvas-path-d3.html:

<script>     const canvas = d3.select("body")                   .append("canvas")                   .attr("width", "800")                   .attr("height", "300");      const ctx = canvas.node().getContext("2d");      ctx.fillStyle = "yellow";     ctx.strokeStyle = "red";     ctx.lineWidth = 3;      ctx.beginPath();     ctx.moveTo(50,20);     ctx.lineTo(200,200);     ctx.lineTo(200,140); ctx.lineTo(270,140); ...