Drawing a Snowman - Exercise

Contact Us or call 1-877-932-8228
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.arc(200,300,70,0,degreesToRadians(360),true);
		context.fill();
		
		//middle ball
		context.beginPath();
		context.fillStyle = "rgb(255,255,255)";
		context.arc(200,200,50,0,degreesToRadians(360),true);
		context.fill();
		
		//head
		context.beginPath();
		context.fillStyle = "rgb(255,255,255)";
		context.arc(200,125,35,0,degreesToRadians(360),true);
		context.fill();
		
		//right eye
		context.beginPath();
		context.fillStyle = "rgb(0,0,0)";
		context.arc(190,115,4,0,degreesToRadians(360),true);
		context.fill();
		
		//left eye
		context.beginPath();
		context.fillStyle = "rgb(0,0,0)";
		context.arc(210,115,4,0,degreesToRadians(360),true);
		context.fill();
		
		//mouth
		context.beginPath();
		context.fillStyle = "rgb(255,0,0)";
		context.arc(200,125,15,degreesToRadians(45),degreesToRadians(135),false);
		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.arc(200,100,25,0,degreesToRadians(180),true);
		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.arc(200,180,5,0,degreesToRadians(360),true);
		context.arc(200,220,5,0,degreesToRadians(360),true);
		context.arc(200,260,5,0,degreesToRadians(360),true);
		context.fill();
		
		//sun
		context.beginPath();
		context.fillStyle = "rgb(255,255,0)";
		context.arc(400,0,70,0,degreesToRadians(360),true);
		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.arc(400,0,70,0,degreesToRadians(360),true);
	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.

Next