# A very short introduction to HTML5's canvas tag element: Graphing mathematical functions in JavaScript

The canvas tag in JavaScript gives the programmer low-level graphics control. If you wanted to write an in-browser game with 2D graphics, it's the right element to use. Firefox, Safari and Chrome support the tag natively, and Internet Explorer supports canvas with a translation layer. This article serves as a very short introduction to the canvas tag by describing the code necessary to create a system for rendering graphs of univariate mathematical functions (like y(x) = sin(x) + C and f(x) = x2 + 2).

## Why?

I've wanted to play with the canvas tag for a while now, and I finally have the perfect confluence of excuses to do so: I want to build an HTML-based rendering system for the output of my static analyzers; I'm introducing three engineering scholars to programming languages with graphics in JavaScript; and I'm building a super-optimizing compilation engine for dynamic languages like Scheme and JavaScript. Building a system for rendering univariate functions seems like a fun way to tip-toe into the canvas tag; below, you'll find an explanation of the system with a working demo.

## Setting up the canvas

Setting up a canvas is straightforward; just drop in a canvas tag:

``` <canvas id="xy-graph" width="535" height="300">
CANVAS NOT SUPPORTED IN THIS BROWSER!
</canvas>
```

The body of the canvas tag is what will be shown if the browser does not support the canvas tag.

## Accessing the canvas

To draw on the canvas, grab ahold of the element itself:

``` var Canvas = document.getElementById('xy-graph');
```

And then grab its context:

``` if (Canvas.getContext) {
Ctx = Canvas.getContext('2d');
// Rendering code goes here.
} else {
// Canvas not supported code goes here.
}
```

To draw on the canvas, call methods on the `Ctx` object.

## Preparing the canvas

To prepare the canvas for drawing, it's best to clear what's already on the canvas with the `clearRect(startX,startY,finishX,finishY)` method:

``` Ctx.clearRect(0,0,Canvas.width,Canvas.height) ;
```

## Drawing lines

For graphing functions, we only need to draw lines, and we can do that with only four canvas context functions:

• `Ctx.beginPath()` starts recording a new sequence of line segments.
• `Ctx.moveTo(x,y)` moves the pen to the coordinates `(x,y)`.
• `Ctx.lineTo(x,y)` drags the pen to the coordinates `(x,y)`.
• `Ctx.stroke()` connects all of the points in the path described.

## Demo application: Graphing a function

Type JavaScript code in below that defines a function named `F`, and the click Draw! button further down. The full, well-commented source code to this app is about 200 lines, and it's available down below.

CANVAS NOT SUPPORTED IN THIS BROWSER!