Code Fellows 201
Day 12 Notes
Home
Reading
JavaScript Canvas
What does the <canvas> allow a developer to acheive?
- draw 2D graphics using JavaScript.
What is the importance of the closing `</canvas> tag?
- 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.
Explain what the getContext() method does.
- 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.
Chart.js Documentation:
What is Chart.js and how it can be brought into your project?
- It’s easy to get started with Chart.js. All that’s required is the script included in your page along with a single <canvas> node to render the chart.
- use the min.js file in your js file
List 3 different Chart types you can create using Chart.js.
- Area Chart
- Bar Chart
- Bubble Chart
- Doughnut and Pie Charts
- Line Chart
- Mixed Chart Types
- Polar Area Chart
- Radar Chart
- Scatter Chart
Easily Create Stunning Animated Charts with Chart.js
What are some advantages to displaying data via a chart over a table?
- Charts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool.
How could Chart.js aid your previously created applications visually?
- Take data displayed in tables (salmon cookies) and create a much more sophisticated and pretty visual aid
Bookmark and Review
Drawing Shapes With Canvas
Applying Style and Colors - Canvas API
Drawing Text - Canvas API