liveBook · Manning

Fill()

As explained in D3.js in Action, Third Edition

The Canvas fill() method fills the interiors of the current path's shapes using the active fill style.

The Canvas fill() method paints the interior of the current path’s shapes using the context’s active fillStyle. Unlike stroke(), which draws only a border, fill() produces a solid shape. section 15.2.3

Use fill() in a short drawing sequence:

  • Define a shape such as a rectangle with rect() or roundRect(). section 15.2.3
  • Set context.fillStyle when the shape needs a color other than Canvas’s default black. section 15.2.3
  • Call fill() to paint the current path; call beginPath() before a separate path when styles or geometry should not carry over. section 15.2.3

Filled rectangle

context.rect(346, 33, 160, 80); context.fillStyle = "#6ba5d7"; context.fill(); This draws a blue rectangle at the specified position and size.

Filled circles in a visualization

For each painting node, assign fillStyle from its subject, start a path, draw an arc, and use fill() before stroke() adds the medium-specific border. section 15.3

How D3.js in Action, Third Edition covers it

How deep it goes
Explains the call sequence, fillStyle, batching, and path resets, but does not descend into Canvas rendering internals.
Examples
Uses filled rectangles, rounded rectangles, and subject-colored circles with contrasting borders.
What it assumes
Assumes familiarity with Canvas paths and context properties while demonstrating the fill-versus-stroke distinction directly.
What you can do after
Build it from scratch by defining a Canvas path, choosing fillStyle, and painting its interior with fill().
How it connects
Connects fill() to Canvas paths, fillStyle, beginPath(), rect(), roundRect(), arc(), and stroke().
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.