copyedits

canvas.html

@@ -103,12 +103,12 @@ <h2 id=shapes>Simple Shapes</h2>
 A: Not yet. Individual vendors have experimented with their own three-dimensional canvas <abbr>API</abbr>s, but none of them have been standardized. The <abbr>HTML5</abbr> specification notes, &#8220;A future version of this specification will probably define a 3d context.&#8221;
 </blockquote>
 
-<p>You have a <code>&lt;canvas></code> element, and you have its drawing context. The drawing context is where all the drawing methods and properties are defined. There&#8217;s a whole group of methods devoted to drawing rectangles:
+<p>So, you have a <code>&lt;canvas></code> element, and you have its drawing context. The drawing context is where all the drawing methods and properties are defined. There&#8217;s a whole group of properties and methods devoted to drawing rectangles:
 
 <ul>
 <li>The <code>fillStyle</code> property can be a <abbr>CSS</abbr> color, a pattern, or a gradient. (More on gradients shortly.) The default <code>fillStyle</code> is solid black, but you can set it to whatever you like. Each drawing context remembers its own properties as long as the page is open, unless you do something to reset it.
 <li><code>fillRect(x, y, width, height)</code> draws a rectangle filled with the current fill style.
-<li>The <code>strokeStyle</code> property is like <code>fillStyle</code> &mdash; it can be a CSS color, pattern, or gradient.
+<li>The <code>strokeStyle</code> property is like <code>fillStyle</code> &mdash; it can be a CSS color, a pattern, or a gradient.
 <li><code>strokeRect(x, y, width, height)</code> draws an rectangle with the current stroke style. <code>strokeRect</code> doesn&#8217;t fill in the middle; it just draws the edges.
 <li><code>clearRect(x, y, width, height)</code> clears the pixels in the specified rectangle.
 </ul>
@@ -187,21 +187,20 @@ <h2 id=paths>Paths</h2>
 
 <p style="float:left;margin:1.75em 1.75em 1.75em 0"><img src=i/openclipart.org_media_files_johnny_automatic_7563.png alt="gerbil sitting on a chair with a quill and ink jar" width=167 height=347>
 
-<p>Imagine you&#8217;re drawing a picture in ink. You don&#8217;t want to just dive in and start drawing with ink, because you might make a mistake. So you sketch lines and curves with a pencil, and once you&#8217;re happy with it, you trace over your sketch in ink.
+<p>Imagine you&#8217;re drawing a picture in ink. You don&#8217;t want to just dive in and start drawing with ink, because you might make a mistake. Instead, you sketch the lines and curves with a pencil, and once you&#8217;re happy with it, you trace over your sketch in ink.
 
 <p>Each canvas has a <dfn>path</dfn>. Defining the path is like drawing with a pencil. You can draw whatever you like, but it won&#8217;t be part of the finished product until you pick up the quill and trace over your path in ink.
 
-<p>To draw straight lines in pencil:
+<p>To draw straight lines in pencil, you use the following two methods:
 
 <ol style="list-style-position:inside">
-<li><code>moveTo(x, y)</code> moves the pencil to the starting point.
-<li><code>lineTo(x, y)</code> draws a line to an ending point.
-<li>Go to step 1.
+<li><code>moveTo(x, y)</code> moves the pencil to the specified starting point.
+<li><code>lineTo(x, y)</code> draws a line to the specified ending point.
 </ol>
 
 <p>The more you call <code>moveTo()</code> and <code>lineTo()</code>, the bigger the path gets. These are &#8220;pencil&#8221; methods &mdash; you can call them as often as you like, but you won&#8217;t see anything on the canvas until you call one of the &#8220;ink&#8221; methods.
 
-<p>Let&#8217;s draw the off-white grid.
+<p>Let&#8217;s begin by drawing the off-white grid.
 
 <pre style="float:left"><code>for (var x = 0.5; x &lt; 500; x += 10) {
   context.moveTo(x, 0);
@@ -220,7 +219,7 @@ <h2 id=paths>Paths</h2>
 <pre><code>context.strokeStyle = "#eee";
 <mark>context.stroke();</mark></code></pre>
 
-<p><code>stroke()</code> is one of the &#8220;ink&#8221; methods. It takes the complex path you defined with all those <code>moveTo()</code> and <code>lineTo()</code> calls, and it actually draws it on the canvas. The <code>strokeStyle</code> controls the color of the lines, and this is the result:</p>
+<p><code>stroke()</code> is one of the &#8220;ink&#8221; methods. It takes the complex path you defined with all those <code>moveTo()</code> and <code>lineTo()</code> calls, and actually draws it on the canvas. The <code>strokeStyle</code> controls the color of the lines. This is the result:</p>
 
 <canvas id=c2 width=500 height=375></canvas>
 
@@ -257,12 +256,12 @@ <h4>Ask Professor Markup</h4>
 context.lineTo(55, 370);</code></pre>
 <p class="legend right" style="margin-top:4em"><span class=arrow>&nbsp;&#x219c;</span> Not a new path</p>
 
-<p class=clear>I said these arrows were going to be black, but the <code>strokeStyle</code> is still off-white. (The <code>fillStyle</code> and <code>strokeStyle</code> don&#8217;t get reset when you start a new path.) That&#8217;s OK, because we&#8217;ve just run a series of &#8220;pencil&#8221; methods. But before we draw it for real, in &#8220;ink,&#8221; we need to set the <code>strokeStyle</code> to black. Otherwise, these two arrows will be off-white, and we could hardly see them!
+<p class=clear>I said these arrows were going to be black, but the <code>strokeStyle</code> is still off-white. (The <code>fillStyle</code> and <code>strokeStyle</code> don&#8217;t get reset when you start a new path.) That&#8217;s OK, because we&#8217;ve just run a series of &#8220;pencil&#8221; methods. But before we draw it for real, in &#8220;ink,&#8221; we need to set the <code>strokeStyle</code> to black. Otherwise, these two arrows will be off-white, and we&#8217;ll hardly be able to see them! The following lines change the color to black and draw the lines on the canvas:
 
 <pre><code>context.strokeStyle = "#000";
 context.stroke();</code></pre>
 
-<p>And this is the result:</p>
+<p>This is the result:</p>
 
 <canvas id=c3 width=500 height=375></canvas>
 
@@ -283,7 +282,7 @@ <h2 id=text>Text</h2>
 </tfoot>
 </table>
 
-<p>You can draw <a href=#paths>lines on a canvas</a>. You can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: no floats, no margins, no padding, no word wrapping. (Maybe you think that&#8217;s a good thing!) You can set a few font attributes, then you pick a point on the canvas and draw your text there.
+<p>In addition to drawing <a href=#paths>lines on a canvas</a>, you can also draw text on a canvas. Unlike text on the surrounding web page, there is no box model. That means none of the familiar CSS layout techniques are available: no floats, no margins, no padding, no word wrapping. (Maybe you think that&#8217;s a good thing!) You can set a few font attributes, then you pick a point on the canvas and draw your text there.
 
 <p>The following font attributes are available on the <a href=#shapes>drawing context</a>:
 
@@ -293,7 +292,7 @@ <h2 id=text>Text</h2>
 <li><code>textBaseline</code> controls where the text is drawn relative to the starting point. Possible values are <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, or <code>bottom</code>.
 </ul>
 
-<p><code>textBaseline</code> is tricky, because text is tricky. Well, English text is not tricky, but you can draw any Unicode character you like on a canvas, and Unicode is tricky. The <abbr>HTML5</abbr> specification <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-textbaseline>explains the different text baselines</a>:
+<p><code>textBaseline</code> is tricky, because text is tricky (English text isn&#8217;t, but you can draw any Unicode character you like on a canvas, and Unicode is tricky). The <abbr>HTML5</abbr> specification <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-textbaseline>explains the different text baselines</a>:
 
 <blockquote cite=http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-textbaseline>
 <p>The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline is where some glyphs like <span class=u>आ</span> are anchored, the middle is half-way between the top of the em square and the bottom of the em square, the alphabetic baseline is where characters like <span class=u>Á</span>, <span class=u>ÿ</span>, <span class=u>f</span>, and <span class=u>Ω</span> are anchored, the ideographic baseline is where glyphs like <span class=u>私</span> and <span class=u>達</span> are anchored, and the bottom of the em square is roughly at the bottom of the glyphs in a font. The top and bottom of the bounding box can be far from these baselines, due to glyphs extending far outside the em square.</p>
@@ -326,12 +325,12 @@ <h4>Ask Professor Markup</h4>
 </div>
 </div>
 
-<p>For the text in the upper-left corner, I want the top of the text to be at <code>y=5</code>. But I&#8217;m lazy &mdash; I don&#8217;t want to measure the height of the text and calculate the baseline. Instead, I can set the <code>textBaseline</code> to <code>top</code> and pass in the upper-left coordinate of the text&#8217;s bounding box.
+<p>For the text in the upper-left corner, let&#8217;s say I want the top of the text to be at <code>y=5</code>. But I&#8217;m lazy &mdash; I don&#8217;t want to measure the height of the text and calculate the baseline. Instead, I can set <code>textBaseline</code> to <code>top</code> and pass in the upper-left coordinate of the text&#8217;s bounding box.
 
 <pre><code>context.textBaseline = "top";
 context.fillText("( 0 , 0 )", <mark>8, 5</mark>);</code></pre>
 
-<p>For the text in the lower-right corner, I want to be lazy again. I want the bottom-right corner of the text to be at coordinates <code>(492,370)</code> &mdash; just a few pixels away from the bottom-right corner of the canvas &mdash; but I don&#8217;t want to measure the width or height of the text. I can set <code>textAlign</code> to <code>right</code> and <code>textBaseline</code> to <code>bottom</code>, then call <code>fillText()</code> with the bottom-right coordinates of the text&#8217;s bounding box.
+<p>Now for the text in the lower-right corner. Let&#8217;s say I want the bottom-right corner of the text to be at coordinates <code>(492,370)</code> &mdash; just a few pixels away from the bottom-right corner of the canvas &mdash; but I don&#8217;t want to measure the width or height of the text. I can set <code>textAlign</code> to <code>right</code> and <code>textBaseline</code> to <code>bottom</code>, then call <code>fillText()</code> with the bottom-right coordinates of the text&#8217;s bounding box.
 
 <pre><code>context.textAlign = "right";
 context.textBaseline = "bottom";
@@ -341,13 +340,13 @@ <h4>Ask Professor Markup</h4>
 
 <canvas id=c4 width=500 height=375></canvas>
 
-<p>Oops! We forgot the dots in the corners. I&#8217;m going to cheat a little and <a href=#shapes>draw them as rectangles</a>. We&#8217;ll see how to draw circles a little later.
+<p>Oops! We forgot the dots in the corners. We&#8217;ll see how to draw circles a little later. For now, I&#8217;ll cheat a little and <a href=#shapes>draw them as rectangles</a>. 
 
 <pre style="float:left"><code>context.fillRect(0, 0, 3, 3);
 context.fillRect(497, 372, 3, 3);</code></pre>
 <p class="legend right"><span class=arrow>&nbsp;&#x21dc;</span> Draw two &#8220;dots&#8221;</p>
 
-<p>And that&#8217;s all she wrote!</p>
+<p>And that&#8217;s all she wrote! Here is the final product:</p>
 
 <canvas id=c5 width=500 height=375 class=clear></canvas>