Drawing a Sailboat - Exercise

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.

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 ----
}
}

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)";
}
}

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();