O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Graphing equations

In this recipe, we'll create a configurable Graph class that draws the x and y axis with tick marks and values, and then we'll construct a method called drawEquation() that allows us to graph f(x) functions. We'll instantiate a Graph object and then draw a sine wave, a parabolic equation, and a linear equation.

Graphing equations

How to do it...

Follow these steps to create a Graph class that can draw an x and y axis with values, and also graph multiple f(x) equations:

  1. Define the constructor for the Graph class that draws the x and y axis:
    function Graph(config){ // user defined properties this.canvas = document.getElementById(config.canvasId); this.minX ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required