JavaScript Canvas
What does the
- Canvas element allows developers to draw 2D graphics using Javascript
- const canvas = document.querySelector(‘#canvas’);
const width = canvas.width;// 500
const height = canvas.height;// 300
What is the importance of the closing `</canvas> tag?
- Any content between the opening and closing tags is fallback content that will display only if the browser doesn’t support the ‘canvas element.
Explain what the getContext() method does.
- getContext method returns a render context object
Chart.js Documentation:
What is Chart.js and how it can be brought into your project?
- Chart.js is a javascript plugin that uses HTML5’s canvas element to draw the graph onto the page. It’s a well documented plugin that makes using all kinds of bar charts, line charts, pie charts and more. Chart.js can be imported via script tag, pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart.
List 3 different Chart types you can create using Chart.js.
- line chart, bar chart, pie chart. Instructios can be found here and here.
Easily Create Stunning Animated Charts with Chart.js
What are some advantages to displaying data via a chart over a table?
- Data visualization enablels viewers to understand the data much easier.
How could Chart.js aid your previously created applications visually?
- Data visualization will show easier to decipher trend datas over long periods of time.
References