CS 50.12 HTML 5 :: Interactive Web Pages

Hello World

Let's start with a very basic page that displays a rectangle that has a fill color and stroke. This example is featured in our textbook and is titled the "hello world" example.

<!DOCTYPE html>
<html>
<head> <title>canvas hello world</title>

<style>canvas { margin: 50px auto; display: block; border: 1px solid #ccc;}</style>

</head>
<body>

<canvas>your browsers does not support the canvas element</canvas>
<script>
var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(10, 20, 50, 50);

ctx.strokeStyle = 'rgb(0, 182, 0)';
ctx.lineWidth = 5;
ctx.strokeRect(9, 19, 52, 52);
</script>

</body>

</html>

Here is my first attempt at an explanation of the Javascript code - please send me a note if you have a more accurate way to describe the code.

var="variable"

ctx = context

document.querySelector('canvas')= the code "document.query.Selector" is the Javascript function the term in the () is the value of the arguments. In this case the value of the arguments is 'canvas'. This asks the browser to find the canvas element and then apply the code that follows to that element.

.getContext('2d') lets the browser know we will be applying the 2D API to the canvas element.

ctx.fillStyle = 'rgb(0, 255, 0)';
this function sets the fill color to green, whatever shapes or lines that are listed after this code will be filled with the green color

ctx.fillRect(10, 20, 50, 50);
this function sets the position of the rectangle. The upper left corner will be at the X and Y coordinates of 10 from the top and 20 from the left. The browser will then draw a rectangle that is 50 pixels wide and 50 pixels tall.

ctx.strokeStyle = 'rgb(0, 182, 0)';
This sets the stroke style to another shade of green

ctx.lineWidth = 5;
This sets the width of the stroke at 5 pixels

ctx.strokeRect(9, 19, 52, 52);
This determines where the strike will begin and end

Here is the sample file which uses this code, note that the Javascript is in the body of the document.

Here is a variation on the sample page with colors in hex and changes to the size of the rectangle and stroke.,

Please note that the script code is in the body of the document. That seems to be the author's style.

Overlap transparent squares

We can take this draw a rectangle one step further by using transparent color that allows 2 rectangles to overlap and form a thid color.

<html>
<head>

<script>
function draw()
{ var canvas = document.getElementById("overlap");
if (canvas.getContext) { var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50); } }
</script>

</head>

<body onload="draw();">
<canvas id="overlap" width="150" height="150"> <p>This example requires a browser that supports the <a href="http://www.w3.org/html/wg/html5/">HTML5</a> &lt;canvas&gt; feature.</p>
</canvas>

</body>
</html>

function draw()
The code begins in the head of the document with a <script> tag that defines the draw function.

{ var canvas = document.getElementById("overlap");
this code asks the browser to find an element that has an "id" of overlap

if (canvas.getContext) { var ctx = canvas.getContext("2d");
now we ask the browser to use the 2d drawing tools built into the HTML code

ctx.fillStyle = "rgb(200,0,0)";
Now the code sets the fill color to red

ctx.fillRect (10, 10, 55, 50);
This code asks the browser to fill a rectangle. In determining the placement of the rectangle the upper left corner is set to 10, 10 wth the value of 55 as the width and 50 as the height.

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
this code changes the fill color to transparent blue (0.5 is 50% opacity)

ctx.fillRect (30, 30, 55, 50); } }
Now we draw a second rectangle with the upper left corner at 30.30 and the height and width of 55 and 50.

Within the body of the document we have a bit more javascript.

<body onload="draw();">
when the page loads the draw function is invoked causing the rectangle to display.

Note that this code varies slightly from the first example:

  • the CSS in an inline style within the canvas tag (we usually put the CSS in the head of the document as an embedded style or use an external style sheet)

  • the Javascript is invoking the 2d drawing tool by using the funtion document.getElementById and looking for an id of "overlap"

    in the first example the javascript used was document.querySelector which is looking for a specific tag or element (in this case canvas).

    Both systems work, as you use more Javascript you will become comfortable with either approach.

    Sample overlap file

Drawing a stick figure

Here is the code for the finished page

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>path API example: stickman</title>
<style>canvas { margin: 50px auto; display: block; border: 1px solid #ccc;}</style> </head>

<body> <canvas height="300" width="200"></canvas>
<script> var ctx = document.querySelector('canvas').getContext('2d'); ctx.fillStyle = '#000'; ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = '#fff'; ctx.strokeStyle = '#fff'; </script>
</body>
</html>

Step 1 - create a black box

var ctx = document.querySelector('canvas').getContext('2d');
ctx.fillStyle = '#000';
ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#fff';

ctx.fillStyle = '#000'; // fill with black

ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height);
// fill a rectangle the height and width of the canvas area (in this case 300 tall by 200 wide).

ctx.fillStyle = '#fff'; // now switch the fill color to white

ctx.strokeStyle = '#fff'; // make the stroke style white

Here is how the page looks at this stage

Step 2 - add the head

Now I add more javascript

ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.save();

ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI*2, true); // head
ctx.fill();

ctx.lineWidth = 5; // sets the line width to 5

ctx.lineCap = 'round'; // the end of any lines I draw will be rounded

ctx.save(); // save the values for later????

ctx.beginPath(); // lets the browser know it will begin to draw a path (shape)

ctx.arc(100, 50, 30, 0, Math.PI*2, true);
draw an arc which begins at the X,Y coordinates of 100, 50.

The radius is 30 pixels.

Next I give the start and end points for the arc. I start at 0 and end at Math.PI*2 which is the equivalent of 360 degrees.

The final argument is true. This causes the arc to be drawn in a clockwise position. It doesn't matter what direction the circle is drawn in but you have to give a value.

ctx.fill() // causes the circle to be drawn onto the page.

Here is a sample of how the page looks at this stage

Step 3 - add a face

first the smile

// smile path in red
ctx.beginPath();
ctx.strokeStyle = '#c00'; ctx.lineWidth = 3;
ctx.arc(100, 50, 20, 0, Math.PI, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = '#c00'; ctx.lineWidth = 3;

the code asks the browser to begin a path which has a stroke of (#coo) a hexadecimal value for red and a line width of 3. If we did not do this there would be a horizontal line from the outer edge of the head to the beginning of the mouth.

ctx.arc(100, 50, 20, 0, Math.PI, false);
This code sets the starting point for the arc at 100 from the top and 50 from the left. The radius is 20 pixels. I start the arc at zero degrees and then swing 180 degrees. (Math.PI,) False makes the arc be drawn in a counter clock-wise motion.

// create left eye
ctx.beginPath();
ctx.fillStyle = '#c00';
ctx.arc(90, 45, 3, 0, Math.PI*2, true);
ctx.fill();

// create right eye
ctx.moveTo(113, 45);
ctx.arc(110, 45, 3, 0, Math.PI*2, true);
ctx.fill();

// stroke eyes to make them bigger
ctx.stroke();

The code for creating the circles that become the eyes are just like the code to create the head. The code we have not seen before is:

ctx.moveTo(113, 45);
// this allows us to pick up our pen and move it to a new location where we can begin drawing the right eye.

Sample file at this stage of the lesson

Lab Activity

In lab we will work on the stick figure together and I will demonstrate how to draw the body of the figure.

ctx.restore();

ctx.beginPath();
ctx.moveTo(100, 80); // move to neck
ctx.lineTo(100, 180); // body
ctx.lineTo(75, 250); // left leg
ctx.moveTo(100, 180); // move to hips
ctx.lineTo(125, 250); // right leg
ctx.moveTo(100, 90); // move to shoulders
ctx.lineTo(75, 140); // left argm
ctx.moveTo(100, 90); // back to shoulders
ctx.lineTo(125, 140); // right leg

// ctx.closePath();

ctx.stroke();

Final stick figure

If we have the time in Lab we will explore more of the examples from the textbook.

http://introducinghtml5.com/

I especially like the spiral example, after a while it is kinda hypnotizing.