Learn Chart.js

Overlaying a canvas

One way to draw text and graphics on a chart is to draw on the same canvas after the chart is completely loaded. You can do that implementing your code in a function assigned to the animation.onComplete property. You can also write a simple plugin. Another way to draw over or under a chart is to draw on top of another canvas, and position it exactly over or under your chart canvas. This is easy to do if you won’t be resizing your page. If you do any resizing, you will have to write additional scripts to scale your canvas content to keep it in sync with the chart (in this case, a plugin would be a better solution).

As an example, let's use the GeoJSON world map we loaded and rendered in Chapter 2, Technology Fundamentals ...