CSC 240: Computer Graphics

Lab 0: Hello World

in-class

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>
<html>
<head>
<title>Canvas Graphics</title>
<script>
    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
    }
</script>
</head>
<body onload="init()">
    <canvas id="theCanvas" width="640" height="480"></canvas>
</body>
</html>
Credit: "Intrduction to Computer Graphics" by David I. Eck