The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

For the 3D graphics engine, the Canvas API was used to draw pixels to the screen using a familiar web language (JavaScript).

Simple Use

After creating a simple canvas element using the canvas tag in the HTML DOM (labelled with the id "canvas"), it can be referenced with a JavaScript function:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

From this point on, the canvas and its methods can be referenced by calling the "canvas" constant in the JavaScript code. In the case of the 3D graphics engine, the following methods are used on the canvas' context to draw triangles:

ctx.save();
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(triangle.vertices[0].x, triangle.vertices[0].y);
ctx.lineTo(triangle.vertices[1].x, triangle.vertices[1].y);
ctx.lineTo(triangle.vertices[2].x, triangle.vertices[2].y);
ctx.closePath();
ctx.stroke();
ctx.restore();

For more information about the Canvas API.