reading-notes

Class 201.12

Notes

Readings

• JavaScript Canvas
• Chart.js Documentation
• Easily Create Stunning Animated Charts with Chart.js
• Drawing Shapes With Canvas
• Applying Style and Colors - Canvas API
• Drawing Text - Canvas API

Q&A’s

JavaScript Canvas

1. What does the <canvas> allow a developer to acheive?

   The <canvas> element allows a developer to draw 2D graphics using JavaScript code. It provides a region that can be manipulated via a JavaScript interface.

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

   The closing </canvas> tag is important because the <canvas> element requires an opening and closing tag, (unlike the <img> element). Any content between the opening and closing tags is fallback content that will only display if the browser does not support the <canvas> element.

3. Explain what the getContext() method does.

   The getContext() method returns a rendering context object that provides methods and properties for drawing on the <canvas>. It takes one parameter, the context type such as ‘2d’, and returns an instance of a context interface like CanvasRenderingContext2D. This context interface exposes methods like fillRect() and strokeRect() that can be used to draw different shapes and graphics. So getContext() provides the actual drawing API after it is called on a <canvas> element.

Chart.js

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

   it’s a charting library for javascript

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

   Area, Bar, Bubble

###

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

   humans are visual, charts are more visual than tables

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

   cookie-stand: we could see a bar graph of sales per location/hour at a glance odd-duck: we can visualize which products are ones we should prioritize

References

• Google Bard and ChatGPT

This site is open source. Improve this page.