Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 479 FIGURE 12-11 he rendered output, using lineTo and rect methodsT Quick che ...

480 CHAPTER 12 Drawing with HTML5 However, if the fill method is called after the stroke method, the fill overwrites the stroke ...

Lesson 1: Drawing by using the element CHAPTER 12 481 ctx.moveTo(300, 300); ctx.lineTo(350, 250); ctx.lineTo(400, 300); ctx.rec ...

482 CHAPTER 12 Drawing with HTML5 FIGURE 12-13 he arcTo method producing unexpected results if you don’t understand how it works ...

Lesson 1: Drawing by using the element CHAPTER 12 483 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(300, 200); ctx.lineTo(400, ...

484 CHAPTER 12 Drawing with HTML5 Because the starting point is always the ending point of the previous sub-path (or, in this ca ...

Lesson 1: Drawing by using the element CHAPTER 12 485 FIGURE 12-15 Changing the radius changes the arc dramatically Drawing arc ...

486 CHAPTER 12 Drawing with HTML5 ctx.fill(); ctx.stroke(); } In this example, the center of the circle is 400, 300, which is th ...

Lesson 1: Drawing by using the element CHAPTER 12 487 ctx.strokeStyle = 'blue'; ctx.fillStyle = 'yellow'; ctx.lineWidth = 5; ct ...

488 CHAPTER 12 Drawing with HTML5 Drawing text You can also draw text on the canvas by using the fillText or strokeText method. ...

Lesson 1: Drawing by using the element CHAPTER 12 489 The line is drawn as its own path, and then the stroke color is changed t ...

490 CHAPTER 12 Drawing with HTML5 FIGURE 12-19 Changing the textAlign and the textBaseline to center the text within the canvas ...

Lesson 1: Drawing by using the element CHAPTER 12 491 var img = new Image(); img.src = “images/IceBoat.jpg"; img.onload = funct ...

492 CHAPTER 12 Drawing with HTML5 ctx.drawImage(img, 0, 0, 300, 400); } } The result is shown in Figure 12-21. When providing th ...

Lesson 1: Drawing by using the element CHAPTER 12 493 ctx.beginPath(); ctx.moveTo(405, 180); ctx.lineTo(325, 180); ctx.stroke() ...

494 CHAPTER 12 Drawing with HTML5 FIGURE 12-22 he annotated image showing that you can mix images and shapes on the canvasT Less ...

Lesson 1: Drawing by using the element CHAPTER 12 495 Lesson review Answer the following questions to test your knowledge of th ...

496 CHAPTER 12 Drawing with HTML5 Even though SVG renders much better than the canvas, it takes time to scale and re-exe- cute t ...

Lesson 2: Using scalable vector graphics CHAPTER 12 497 The following is a list of commands that can be used in a path. ■■M or m ...

498 CHAPTER 12 Drawing with HTML5 These paths have a fill color of white. The result in Figure 12-23 shows the rendered car body ...