Graphing math functions

context.translate(canvas.width / 2, canvas.height / 2); context.scale(Math.PI * 5, 80); for (let i = -Math.PI * 4; i < Math.PI * 4; i = i + .1) context.fillRect(i, Math.sin(i), 0.1, 0.1);

Click here to (re)start the code

To plot math functions, for example y=sin(x), we can move the (0,0) point to the center of the Canvas:

context.translate(canvas.width / 2, canvas.height / 2);

The two arguments, as you can probably guess, are the x-shift and y-shift. We shifted the origin by half of the canvas width to the right and half of the canvas height down, so it ended up in the center, just like mathematicians are used to.
Next, we can scale (zoom in/out):

context.scale(Math.PI * 5, 80);

Again, we provided the x (5 times Pi) and y (80) scale factors. A factor greated than 1 zooms in, lower than 1 zooms out.
All that remains is a loop that calculates the Y coordinate based on the X and plots the dots.


Back to main page