reading-notes

Software Development Reading Notes

View project on GitHub

JavaScript Canvas

https://www.javascripttutorial.net/web-apis/javascript-canvas/

1 What does the allow a developer to acheive?

HTML5 features the element that allows you to draw 2D graphics using JavaScript.

The element requires at least two attributes: width and height that specify the size of the canvas:

  1. What is the importance of the closing `</canvas> tag?

It provides fallback content to display any text between the opening and closing tags in the event canvas isn’t supported by the browser.

  1. Explain what the getContext() method does.

The element features the getContext() method that returns a render context object.

The getContext() takes one argument which is the type of context. For example, you use the “2d” to get a 2D rendering context object, which is an instance of the CanvasRenderingContext2D interface.

The 2D rendering context allows you to draw shapes, text, images, and other objects.

The following example shows how to select the canvas element using the querySelector() method and access the drawing context by calling its getContext() method:

let canvas = document.querySelector('#canvas');
let ctx = main.getContext('2d');

Check for canvas support

When using the element, it’s important to check if the browser supports the getContext() method. To do it, you use the following code:

let canvas = document.querySelector(‘#main’); if(canvas.getContext) { let ctx = main.getContext(‘2d’); }

Chart.js Documentation

http://www.chartjs.org/docs/

1 What is Chart.js and how it can be brought into your project?

All that’s required is the script included in your page along with a single node to render the chart.

ex:

  1. List 3 different Chart types you can create using Chart.js.

Bar Chart Bubble Chart Line Chart

Easily Create Stunning Animated Charts with Chart.js

https://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/

  1. What are some advantages to displaying data via a chart over a table?

Charts are far better for displaying data visually than tables they are easy to read and display information cleanly.

  1. How could Chart.js aid your previously created applications visually?

You would have a way to display your data in a easy to understand format.

Bookmark and Review

Drawing Shapes With Canvas https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Applying Style and Colors - Canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

Drawing Text - Canvas API https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text

Things I Want to more about

<!DOCTYPE html>

Chart.js demo

more info rendering paths: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#paths