Week 2 Functions

Read Eloquent Javascript Chapter 3 (Functions)
Do all the exercises in this chapter.
Learn about the HTML5 Canvas Tag. See, for example, http://www.html5tutorial.info/html5-canvas.php, http://www.w3schools.com/html5/html5_canvas.asp and and https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

Try and do an aninmation using canvas and setInterval.

<html lang="en">
<head>
</head>

<body>

<h2>How to draw Rectangle?</h2>
            
            <p>
                Before dreaming about creating an interactive HTML5 games, let's start with the basic.
                
            </p>
                <canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas> <br />
                <button  onclick="draw_square();">Red Square</button>

            <script>
//                setInterval("draw_square()",100);
           
		var n=0;
		function draw_square() {
                    var c1 = document.getElementById("c1");
                    var c1_context = c1.getContext("2d");
                    
		    if (n==0) c1_context.fillStyle = "red";
                    else if (n==1) c1_context.fillStyle = "green";
		    	 else c1_context.fillStyle = "yellow";
		    n=(n+1)%3;
		    c1_context.fillRect(50, 50, 100, 100);
                }
            </script>
</body>

How to draw Rectangle?

Before dreaming about creating an interactive HTML5 games, let's start with the basic.

Do exercises in ../html/test1/canvas/.
Have a look at the programs in ../html/test1/hangman/.

s.danicic@gold.ac.uk
Sebastian Danicic BSc MSc PhD (Reader in Computer Science)
Dept of Computing, Goldsmiths, University of London, London SE14 6NW
Last updated 2012-07-03