Chart.js, Canvas

• Chart.js

  • Charts are way better for displaying data and formatting than tables are, but sometimes they are harder to create

  • Chart.js is a JavaScript plugin that uses HTML5’s canvas element to draw the graph on to the page

• Canvas

  • The < canvas > element looks like the < img > elements but it does not have the src and alt. It only has width and height. Standard attributes will make the width 300px and the height 150px. The element can then be sized using CSS

  • You can draw different shapes using canvas and different methods. There are a lot of different methods and shapes you can choose from

  • You can style with two important properties: fillStyle and strokeStyle

    • fillStyle is used when filling shapes with color

    • strokeStyle is used for the outline color

  • You can also use canvas to draw text

Information taken from Chart.js, Basic usage of Canvas, Drawing shapes with Canvas, Applying styles and colors, and Drawing Text