reading notes for code fellows
charts are better for displaying data visually than tables, as they are easier to look at and convey data more quickly. Chart.js is a plugin for JavaScript that allows you to draw graphs onto the page using <canvas>.
<canvas> has two attributes, width and height which are both optional, with a default of 300x150px. Whenever you are using this element, you should provide fallback content for older versions of the browser that can’t use the element. Because of the ability to use fallback content, <canvas> is not a self-closing tag. When you have the element set up in HTML, you then need to pull it into JavaScript and use the getContext function to obtain its drawwing functions.
the canvas grid is also known as the coordinate space, each grid coordinate acts as 1 pixel on the canvas, and the origin is placed at the top left, (0,0). <canvas> only supports rectangles and paths, but you can combine things to create other shapes.
to draw a rectangle, you use fillRect(x, y, width, height) for a filled rectangle, strokeRect(x, y, width, height) for a rectangle outline, or clearRect(x, y, width, height) to clear out a space in the shape of a rectangle.
to draw a path, you start with beginPath(), then you specify where each point is starting at moveTo() and drawing to lineTo() or arcTo(), and then you can use, closePath() to add a straight line to the beginning of the current sub-path, stroke() to draw the outline of a shape, and fill() to fill the path’s content area. you can also draw lines using bezierCurveTo() and quadraticCurveTo(), but those are more complex.
the two important properties for coloring on the canvas are fillStyle (sets the style for filling shapes) and strokeStyle (sets the style for shapes’ outlines). You can draw with semi transparency using either globalAlpha or by assigning a semi-transparent color to the stroke or fill style.
there are also several properties that allow us to style lines:
lineWidth - sets the width of future lineslineCap - sets the appearance of the end of lineslineJoin - sets the appearance of cornersmiterLimit - limits how thick a junction can becomegetLineDash() returns the current line dash pattern array containing an even number of non-negative numberssetLineDash(segments) - sets the current line dash patternlineDashOffset - specifies where to start a dash array on a lineyou can also create gradients in <canvas> using createLinearGrandient(), createRadialGradient(), and createConicGradient(). Once you have the gradient created, you can add its colors using gradient.addColorStop(position, color)
createPattern(image, type) creates a new pattern object.
you can use two methods to render text, fillText(text, x, y, [, maxWidth]) which fills text at the given coordinates or strokeText(text, x, y, [, maxWidth]) which strokes text at the given target. You can also use measureText() to get more information with a TextMetrics object.