This is a very simple example of using vector graphics methods
with the <canvas>
element in JavaScript. It essentially reproduces
Figure I.2 from the textbook (3D Computer Graphics by S. Buss).
To understand how it works, examine the HTML code by using the "View Source" option in your browser. Please note that coordinates are given in terms of pixels, with the origin at the upper right of the canvas element. In other words, the y axis points downwards!
There are a number of very nice
online tutorials about the JavaScript <canvas>
element;
for instance the
w3schools.com HTML5 canvas tutorial.
Please send suggestions or corrections for this page to the author at sbuss@ucsd.edu.