Graphs in JavaScript

Cartesian Plane

The Cartesian Plane is the usual graph surface we are taught in school.
It consists of the x and y axes.

However, there is a subtle difference between the way we use graphs and the HTML Canvas:
The y-axis of the HTML Canvas is measured from the top and increases as you move downwards.

Drawing on the HTML Canvas

In HTML, the canvas tags would represent something like a graph book; and this graph book is plotted or drawn on using JavaScript.
Everything in between these tags are processed as code before the browser adds the result to the static HTML mark-up.

Important: If you don't see anything when you try out the canvas tag, it may be that your browser does not support the canvas tag.
Update the browser to a recent version; or get a different browser.

JavaScript code for HTML Canvas

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>HTML Canvas</title>
    </head>
    <body>

        <h3>Feel of a Canvas</h3>

        <canvas id="move_body" width="500" height="300" style="border: 1px solid #000000;"></canvas>

    </body>
</html>

Canvas References

For a thorough explanation of using JavaScript to draw on the canvas tag, please see any of the following links (You may have to search for the Canvas Tutorial):

w3Schools.com - contains a lot of examples; Simple to follow.

Home and learn - contains a lot of pictures and explanations; Ideal for total beginners.