View on GitHub

reading-notes

Web Designer Depot Article

Chart.js

Chart.js is a great way to diaplay data visually.
Chart.js is a javascript plugin that uses HTML5’s canvas element to draw a graph onto the page
Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in. Then create a new html page and import the script:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.min.js'></script>
    </head>
    <body>
    </body>
</html>

Drawing a line chart

Instead of me sumerizing this badly just go HERE

Canavas API

Basic Usage

similar to the <img> tag but it doesnt have src or alt attributes.
<canvas> has only two attributes - width and height

Drawing Shapes with Canvas

There are three functions that draw rectangles on the canvas:

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 are, making it fully transparent.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

Way more shapes Applying styles and colors

to apply colors to a shape, there are two important properties we can use: fillStyle and strokeStyle.

fillStyle = color
- Sets the style used when filling shapes.
strokeStyle = color
- Sets the style for shapes’ outlines.

more here

Drawing Text

rendering context provides two methods to render text:

fillText(text, x, y [, maxWidth])
- Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.fillText('Hello world', 10, 50);
}

strokeText(text, x, y [, maxWidth])
- Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.strokeText('Hello world', 10, 50);
}

More Here

Back to Homepage