reading-notes

This Repo required for Asac labs class 2

Project maintained by ManarAbdelkarim Hosted on GitHub Pages — Theme by mattgraham

Chart.js, Canvas

Canvas:

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

what is canvas element ?

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

example

     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
   </canvas>

result:

Required </canvas> tag:

unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). If this tag is not present, the rest of the document would be considered the fallback content and wouldn’t be displayed.

## The rendering context: The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The <canvas> element has a method called getContext(). getContext() takes one parameter, the type of context.

Example:

result:

        function draw() {
          var canvas = document.getElementById('canvas');
          if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
    
            ctx.fillStyle = 'rgb(200, 0, 0)';
            ctx.fillRect(10, 10, 50, 50);
    
            ctx.fillStyle = 'reba(0, 0, 200, 0.5)';
            ctx.fillRect(30, 30, 50, 50);
          }
        }
     <body onload="draw();"\>
       <canvas id="canvas" width="150" height="150"\></canvas\>

result:

The grid:

grid or coordinate space, The origin of this grid is positioned in the top left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top, at coordinate (x,y)

Drawing rectangles:

Each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle’s size.

Moving the pen

result:

Lines

For drawing straight lines, use the lineTo() method.

## Arcs To draw arcs or circles, we use the arc() or arcTo() methods. Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by anticlockwise (defaulting to clockwise).

    arc(x, y, radius, startAngle, endAngle, anticlockwise)

Draws an arc with the given control points and radius, connected to the previous point by a straight line.

    arcTo(x1, y1, x2, y2, radius)

Colors:

Line styles

There are several properties which allow us to style lines.

Drawing text

The canvas rendering context provides two methods to render text:

Styling text

Chart.js

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. They’re easier to look at and convey data quickly, but they’re not always easy to create.

A great way to get started with charts is with Chart.js, 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.

Drawing a bar chart

   <canvas id="income" width="600" height="400"\></canvas\>
   var income = document.getElementById("income").getContext("2d");
   new Chart(income).Bar(barData);
   var barData = {
   	labels : ["January","February","March","April","May","June"],
   	datasets : [
   		{
   			fillColor : "#48A497",
   			strokeColor : "#48A4D1",
   			data : [456,479,324,569,702,600]
   		},
   		{
   			fillColor : "rgba(73,188,170,0.4)",
   			strokeColor : "rgba(72,174,209,0.4)",
   			data : [364,504,605,400,345,320]
   		}
   
   ]
   }