Course 201 Class Twelve “Chart.js, Canvas”
HTML5 features the <canvas>
element that allows you to draw 2D graphics using JavaScript.
The <canvas>
element requires at least two attributes: width and height that specify the size of the canvas.
Unlike the <img>
element, The <canvas>
element requires the closing tag </canvas>. Any content between the opening and closing tags is fallback content that will display only if the browser doesn’t support the <canvas>
element.
Questions
- What does the
<canvas>
allow a developer to acheive?
It allows you to draw 2d graphics using javascript.
- What is the importance of the closing
</canvas>
tag?
It allows for the content between the opening and closing tag to be fallback content.
- Explain what the getContext() method does.
It returns a render context object and take the arguement the type of context(ex 2d)
- What is Chart.js and how it can be brought into your project?
It is brought into your project via the <canvas></canvas>
then <script>
tags… it brings a chart into your project.
- List 3 different Chart types you can create using Chart.js.
A line, a bar, pie, and more.
- What are some advantages to displaying data via a chart over a table?
They are simple to use and flexible and they also display some data better visually to the user.
- How could Chart.js aid your previously created applications visually?
You could use it display unordered lists as charts.