Drawing a Sailboat - Exercise

Contact Us or call 1-877-932-8228
Drawing a Sailboat - Exercise

Drawing a Sailboat

Duration: 20 to 30 minutes.

In this exercise, you will use HTML5 canvas to draw a simple sailboat like the one shown below:

  1. Open html5-canvas/Exercises/sailboat.html in your editor.
  2. Add the JavaScript code necessary to draw the sailboat pictured above.

Challenge

Have the left sail blink between different colors. You'll need to use some JavaScript skills to make this happen.

If JavaScript isn't your thing, try adding a little person on your sailboat.

Solution:

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

		context = canvas.getContext("2d");
		
		//boat
		context.fillStyle = "rgb(0,204,153)";
		context.lineWidth = 2;
		context.beginPath();
		context.moveTo(25,160);
		context.lineTo(70,180);
		context.lineTo(150,180);
		context.lineTo(175,160);
		context.closePath();
		context.stroke();
		context.fill();
		
		//pole
		context.beginPath();
		context.lineWidth = 5;
		context.moveTo(100,160);
		context.lineTo(100,50);
		context.stroke();
		
		//left sail
		context.beginPath();
		context.fillStyle = "rgb(255,255,0)";
		context.moveTo(96,50);
		context.lineTo(50,155);
		context.lineTo(90,140);
		context.fill();
		
		//right sail
		context.beginPath();
		context.moveTo(104,50);
		context.lineTo(160,150);
		context.lineTo(110,150);
		context.fill();
	}
---- C O D E   O M I T T E D ----

Challenge Solution:

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

	if (canvas.getContext) {
		context = canvas.getContext("2d");
---- C O D E   O M I T T E D ----
		blink(context,"rgb(255,255,0)");
		addSailor(context);
	}
}

function blink(context,color) {
	context.fillStyle=color;
	context.beginPath();
	context.moveTo(96,50);
	context.lineTo(50,155);
	context.lineTo(90,140);
	context.fill();
	if (color == "rgb(255,255,0)") {
		color = "rgb(255,204,0)";
	} else {
		color = "rgb(255,255,0)";
	}
	setTimeout(function() {blink(context,color);},250);
}

function addSailor(context) {
	context.strokeStyle = "rgb(0,0,0)";
	context.lineWidth = 1;
	context.beginPath();
	//left leg
	context.moveTo(130,160);
	context.lineTo(135,152);
	//right leg
	context.lineTo(140,160);
	//body
	context.moveTo(135,152);
	context.lineTo(135,140);
	//arms
	context.moveTo(130,145);
	context.lineTo(140,145);
	context.stroke();
	//square head
	context.beginPath();
	context.lineWidth = 5;
	context.moveTo(135,140);
	context.lineTo(135,135);
	context.stroke();
}
---- C O D E   O M I T T E D ----

Next