### Plotting a function graph

 JavaScript FAQ | JavaScript Numbers FAQ

Question: How do I plot a graph of a mathematical function using JavaScript?

Answer: To plot a graph of a function on your webpage, use the `canvas` element, as shown in the example below. The `canvas` element is supported in all major browsers: Firefox, Opera, Safari, Google Chrome, and Microsoft Internet Explorer 9 or newer.

Example: Here is a graph of the functions sin x (green) and cos 3x (blue).

The graph has been created using the following JavaScript code:

```function fun1(x) {return Math.sin(x);  }
function fun2(x) {return Math.cos(3*x);}

function draw() {
var canvas = document.getElementById("canvas");
if (null==canvas || !canvas.getContext) return;

var axes={}, ctx=canvas.getContext("2d");
axes.x0 = .5 + .5*canvas.width;  // x0 pixels from left to x=0
axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0
axes.scale = 40;                 // 40 pixels from x=0 to x=1
axes.doNegativeX = true;

showAxes(ctx,axes);
funGraph(ctx,axes,fun1,"rgb(11,153,11)",1);
funGraph(ctx,axes,fun2,"rgb(66,44,255)",2);
}

function funGraph (ctx,axes,func,color,thick) {
var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
var iMax = Math.round((ctx.canvas.width-x0)/dx);
var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
ctx.beginPath();
ctx.lineWidth = thick;
ctx.strokeStyle = color;

for (var i=iMin;i<=iMax;i++) {
xx = dx*i; yy = scale*func(xx/scale);
if (i==iMin) ctx.moveTo(x0+xx,y0-yy);
else         ctx.lineTo(x0+xx,y0-yy);
}
ctx.stroke();
}

function showAxes(ctx,axes) {
var x0=axes.x0, w=ctx.canvas.width;
var y0=axes.y0, h=ctx.canvas.height;
var xmin = axes.doNegativeX ? 0 : x0;
ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
ctx.moveTo(xmin,y0); ctx.lineTo(w,y0);  // X axis
ctx.moveTo(x0,0);    ctx.lineTo(x0,h);  // Y axis
ctx.stroke();
}
```
It is safe to call the `draw()` function after the entire body of the webpage is loaded. The source code of an HTML page containing the `canvas` element may look like this:
```<!DOCTYPE html>
<html>
<script type="text/javascript">
// JavaScript source code goes here
</script>
<canvas id="canvas" width="502" height="108"></canvas>
</body>
</html>
```

Note: If you omit the `DOCTYPE` element at the beginning of the page, then the graphics might not show up in IE browsers: without the `DOCTYPE` element, IE may switch to the backward compatibility mode and treat `canvas` as an unsupported tag.