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!

JavaScript canvas not supported by the browser!

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.