# Drawing a Snowman - Exercise

Drawing a Snowman - Exercise

# Drawing a Snowman

Duration: 20 to 30 minutes.

In this exercise, you will use circles and squares to create a snowman like the one pictured below:

1. Open html5-canvas/Exercises/snowman.html in your editor.
2. Add the JavaScript code necessary to draw the snowman pictured above. You will need to add:
1. A layer of snow on the ground.
2. Three balls for the body and head.
3. Eyes, mouth and nose.
4. A hat.
5. Arms.
6. Buttons.
7. A sun.

## Challenge

Make the sun gradually disappear and the night grow darker.

## Solution:

html5-canvas/Solutions/snowman.html
```<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

if (canvas.getContext) {
context = canvas.getContext("2d");
//day
context.canvas.style.backgroundColor = "rgb(153,153,255)";

//ground snow
context.beginPath();
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0,360,400,40);

//bottom ball
context.beginPath();
context.fillStyle = "rgb(255,255,255)";
context.fill();

//middle ball
context.beginPath();
context.fillStyle = "rgb(255,255,255)";
context.fill();

context.beginPath();
context.fillStyle = "rgb(255,255,255)";
context.fill();

//right eye
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.fill();

//left eye
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.fill();

//mouth
context.beginPath();
context.fillStyle = "rgb(255,0,0)";
context.fill();

//nose
context.beginPath();
context.fillStyle = "rgb(255,102,0)";
context.moveTo(200,122);
context.lineTo(220,126);
context.lineTo(200,130);
context.fill();

//hat
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.fillRect(163,94,75,8);

//left arm
context.beginPath();
context.lineWidth=2;
context.strokeStyle = "rgb(155,85,0)";
context.moveTo(220,180);
context.lineTo(300,160);
context.lineTo(315,165);
context.moveTo(300,160);
context.lineTo(315,158);
context.moveTo(300,160);
context.lineTo(315,150);
context.stroke();

//right arm
context.beginPath();
context.moveTo(170,180);
context.lineTo(110,240);
context.lineTo(115,255);
context.moveTo(110,240);
context.lineTo(95,255);
context.moveTo(110,240);
context.lineTo(85,255);
context.stroke();

//buttons
context.beginPath();
context.fillStyle = "rgb(0,0,0)";
context.fill();

//sun
context.beginPath();
context.fillStyle = "rgb(255,255,0)";
context.fill();
}
---- C O D E   O M I T T E D ----

```

## Challenge Solution:

html5-canvas/Solutions/snowman-challenge.html
```<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

var timer = null;
function drawPath() {
var canvas=document.getElementById("my-canvas");
if (canvas.getContext) {
---- C O D E   O M I T T E D ----

darken(context,153,153,255,1);
}
---- C O D E   O M I T T E D ----
function darken(context,r,g,b,sunchop) {
context.canvas.style.backgroundColor = "rgb("+r+","+g+","+b+")";
context.beginPath();
context.strokeStyle = "rgb("+r+","+g+","+b+")";
context.lineWidth = sunchop;
context.stroke();
if (r>0) r-=3;
if (g>0) g-=3;
if (b>0) b-=3;
sunchop+=2;
if (r>0 || g>0 || b>0) {
timer = setTimeout(function() {darken(context,r,g,b,sunchop)},100);
}
}
---- C O D E   O M I T T E D ----

```

## Animation

If you tried out (or review the solution for) the "challenge" portion of the snowman exericse, you ended up animating a few elements: the sun moved across the sky and the color of the sky darkened accordingly. We'll review this a bit more here, and offer another animation-based exercise for you to try out.

The JavaScript setTimeout function allows us to execute arbitrary JavaScript code after a delay specified in milliseconds. The code:

`setTimeout(function(){alert("Hey There!")},5000);`

will execute a JavaScript alert (a popup message) after 5000 milliseconds; that is, after 5 seconds. (We typically wrap the executable code inside setTimeout in an anonymous function - the function(){} bit. The reasons why are perhaps beyond the scope of this course; definitely do use an anonymous function when using setTimeout.)

In the snowman challenge exercise, we called function darken from inside function darken, provided the position of the sun was within some set range of coordinates. This is a recursive function call - a function calling itself. We can use this strategy to produce animation, either for a set period (like, in the case of the snowman challenge exercise, only until the sun goes off the screen) or indefinitely (if we want the animation to go on without stopping.)

You'll use setTimeout and a recursive function call to animate a Pacman mouth opening and closing in the next exercise.