Chart.js & Canvas

Chart.js & Canvas

Chart.js

You can place charts on your page by using Chart.js prepared charts, they have a good collection of chart types and its all open source.
You can simply go to their website and read the instructions on how to add the charts to your page and then manipulate the code to reflect your site data.
For example, if you want to add a line chart to project some data, you can copy the configuration code from the site and paste it within your js code then add your same data to it, so it can be projected as a chart.

 

ME

Canvas

Canvas is an element you can add to your HTML file to insert drawing from many resource including js. you can use it to make visuals from js and add it to your webpage.

At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn’t have the src and alt attributes. Indeed, the <canvas> element has only two attributes, width and height.

From the many usages that you can benefit from, Canvas let you insert shapes using javaScript to your page, you can choose the shape name and then simply fill the attributes that are the x point, y point and the width and hight (each shape differ in attributes).
You can also color the shapes you made by applying fillStyle = color after the shape command and then use a certain color (by hex or rgb). the fillstyle will fill the inner part from the shape, the strokeStyle = color will color the outline of the shape or the border.

 

ME

You can add text and style it using the canvas, by applying filltext, you will be able to control the weight of the font and by using some attributes like:

  • font The current text style being used when drawing text. This string uses the same syntax as the CSS font property. The default font is 10px sans-serif.
  • textAlign Text alignment setting. Possible values: start, end, left, right or center. The default value is start.
  • textBaseline Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
  • direction Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.

 

You can take the Unit: Intro to JS: Drawing & Animation course from Khan Academy.

   

Get back to EMAM’S HOMEPAGE

I have created this page as a part of my project using Github, Please visit my profile, I will be more than happy to hear from you all.                       © Emam Shararah 2021