Docs for the HTML Element & Chart.js

Notes from the article Easily Create Stunning Animated Charts with Chart.js written by Sara Vieira

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

  1. Create a canvas element in HTML
  2. Write a script that will retrieve the context of the canvas and add to the foot of your body element
  3. Create data by supplying a value
  4. Apply colors
  5. Add options and style rules

Notes from Basic usage of canvas

The <canvas> element

Notes from Drawing shapes with canvas

The grid

Drawing rectangles

There are 3 functions that draw rectangles on the canvas:

  1. fillRect(x, y, width, height) Draws a filled rectangle.

  2. strokeRect(x, y, width, height) Draws a rectangular outline.

  3. clearRect(x, y, width, height) Clears the specified rectangular area, making it fully transparent

Drawing paths



To draw arcs or circles, we use the arc() or arcTo() methods.

Notes from Applying styles and colors


If we want to apply colors to a shape, there are two important properties we can use: fillStyle and strokeStyle


This is done by either setting the globalAlpha property or by assigning a semi-transparent color to the stroke and/or fill style.

Line Styles

Notes from Drawing text

The canvas rendering context provides two methods to render text:

Styling text