Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

459 Chapter 12 Drawing with HTML5 CHAPTER 12 Drawing with HTML5 I n the past, the most common method for drawing on a webpage wa ...

460 CHAPTER 12 Drawing with HTML5 Lesson 1: Drawing by using the element The only significant attributes that the <canvas> ...

Lesson 1: Drawing by using the element CHAPTER 12 461 ■■addColorStop() Method to set the colors and stop positions in a gradien ...

462 CHAPTER 12 Drawing with HTML5 ■■moveTo( ) ethod that moves the path to the specified point in the canvas without M creating ...

Lesson 1: Drawing by using the element CHAPTER 12 463 $(document).ready(function () { drawSomething(); }); function drawSomethi ...

464 CHAPTER 12 Drawing with HTML5 , i = 0; for (i = 0; i < count; i++) { ctx.fillRect(i * (offset + width) + offset, offset, ...

Lesson 1: Drawing by using the element CHAPTER 12 465 Configuring the drawing state In the previous example, what is the fill c ...

466 CHAPTER 12 Drawing with HTML5 FIGURE 12-2 he rendered rectangles, using T CSS color values ■■Gradient A CanvasGradient objec ...

Lesson 1: Drawing by using the element CHAPTER 12 467 , height = 50 , offset = 10; gradient = ctx.createLinearGradient(x0, y0, ...

468 CHAPTER 12 Drawing with HTML5 FIGURE 12-3 Creating and assigning gradients to the fillStyle property This example code displ ...

Lesson 1: Drawing by using the element CHAPTER 12 469 Figure 12-4 shows a small image with a rectangle and a circle. This image ...

470 CHAPTER 12 Drawing with HTML5 FIGURE 12-5 he pattern repeated within the rectangular areaT Setting lineWidth The lineWidth p ...

Lesson 1: Drawing by using the element CHAPTER 12 471 FIGURE 12-6 he lineWidth, increased on each iteration of the for loopT Se ...

472 CHAPTER 12 Drawing with HTML5 produces a rectangle with beveled corners. Finally, the third rectangle’s lineJoin property is ...

Lesson 1: Drawing by using the element CHAPTER 12 473 addColorStops(gradient); ctx.strokeStyle = gradient; ctx.strokeRect(10, 0 ...

474 CHAPTER 12 Drawing with HTML5 FIGURE 12-8 he strokeStyle property, which accepts the same values as fillStyleT Saving and re ...

Lesson 1: Drawing by using the <canvas> element CHAPTER 12 475 In this example, the lineWidth, strokeStyle, and lineJoin p ...

476 CHAPTER 12 Drawing with HTML5 The examples that follow have a simple webpage with a <canvas> element and references to ...

Lesson 1: Drawing by using the element CHAPTER 12 477 ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.moveTo(30 ...

478 CHAPTER 12 Drawing with HTML5 The second shape is also a triangle and is drawn like the first triangle, but the stroke metho ...