Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Lesson 1: Drawing by using the element CHAPTER 12 479


FIGURE 12-11 he rendered output, using lineTo and rect methodsT

Quick check
■■What are the four parameters of the rect method?

Quick check answer
■■The first and second parameters are the x and y coordinates of the upper-left
corner of the rectangle. The third parameter is the width, and the fourth param-
eter is the height.

Ordering the fill and the stroke method calls
You might be wondering whether there is a difference between calling fill and then stroke
versus calling stroke and then fill. There is a difference, but before the difference is displayed,
you need to understand how the stroke is rendered.
When stroke is called, the outline is created using the current lineWidth property. Half
of lineWidth is outside the shape, and half is inside the shape. The part of the outline that
is inside the shape overwrites the fill if the stroke method is called after the fill method.
Free download pdf