Skip to content

Latest commit

 

History

History
67 lines (40 loc) · 2.76 KB

class-12.md

File metadata and controls

67 lines (40 loc) · 2.76 KB

Readings: Chart.js, Canvas

JavaScript Canvas

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 ` tag?

  • The "" element requires the closing tag "". Any content between the opening and closing tags is fallback content that will display only if the browser doesn’t support the "" element.

Explain what the getContext() method does.

  • it returns a render context object

Chart.js Documentation:

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

  • it 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, incredibly easy.
  • is a charting library. You can use Chart.js directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.

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

  • Area
  • Bar
  • Bubble
  • Doughnut and Pie
  • Line
  • Mixed Chart types
  • Polar Area Chart
  • Radar
  • Scatter

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?

  • chart.js is easier to look at and can convey data quickly

Bookmark and Review

Drawing Shapes With Canvas

  • "By the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes. Working with paths is essential when drawing objects onto the canvas and we will see how that can be done." fillRect(x, y, width, height) Draws a filled rectangle.

  • strokeRect(x, y, width, height) Draws a rectangular outline.

  • clearRect(x, y, width, height) Clears the specified rectangular area, making it fully transparent.

Applying Style and Colors - Canvas API

  • Shows some amazing examples of what you can draw

Drawing Text - Canvas API

  • Drawing text is possible, this page shows you some of the commands