CSC 240: Computer Graphics

Lab 0: Hello World


The goal of this lab is to begin HTML and make sure your browser supports WebGL.

Step 0:

Copy and paste the following code into a text editor and save as "lab0.html". Then try to open the file in a web browser. What do you see?

<!DOCTYPE html>
<title>Canvas Graphics</title>
    var canvas;    // DOM object corresponding to the canvas
    var graphics;  // 2D graphics context for drawing on the canvas
    function draw() {
           // draw on the canvas, using the graphics context
        graphics.fillText("Hello World", 10, 20);

    function init() {
        canvas = document.getElementById("theCanvas");
        graphics = canvas.getContext("2d");
        draw();  // draw something on the canvas
<body onload="init()">
    <canvas id="theCanvas" width="640" height="480"></canvas>

Credit: "Intrduction to Computer Graphics" by David I. Eck