Building the User Interface by Using HTML5: Text, Graphics ... - server

40 | Lesson 2X REFYou’ll learn how to useJavaScript in Lessons 8,9, and 10.Figure 2-14The Web page with a canvasshapeThe context.fillStyle method fills the rectangle with a blue color using the RGBvalues 0, 0, 255. The context.fillRect method creates a 200-pixel wide x 100-pixeltall rectangle, positioned 10 pixels down and 20 pixels over from the upper-left cornerof the canvas and fills it using the color specified by fillStyle.2. Save the file as L2-canvas.html and view it in a browser. The shape should appear asshown in Figure 2-14.LICENSED PRODUCT NOT FOR RESALE3. If a blue rectangle doesn’t appear, go to the W3C Markup Validation Service Webpage at http://validator.w3.org. Upload L2-canvas.html and click Check to havethe service check it. Fix any errors reported by the checker. Save the file again andview it in a browser.4. Leave the file, editing tool, and Web browser open if you’re continuing immediatelyto the next exercise.CREATING AN OUTLINE OF A SHAPETo create an outline of a rectangle without a fill color, use the context.strokeRectmethod. It uses the same values as context.fillRect. To modify the color of the outline(the stroke color), use context.strokeStyle. For example, to create a 200 x 100 pixelrectangular outline in red, use these methods in your JavaScript:context.strokeStyle = "red";context.strokeRect(10,20,200,100);USE CANVAS TO CREATE THE OUTLINE OF A SHAPEGET READY. To use the canvas element to create the outline of a shape, perform thefollowing steps:1. In your editing tool, save L2-canvas.html as L2-canvas-stroke.html.2. Replace the fillStyle and fillRect code lines with the following:context.strokeStyle = "red";context.strokeRect(10,20,200,100);3. Delete the width and height attributes from the canvas element in the body(after id="smlRectangle").4. Save the file and view it in a Web browser. The shape should appear as shown inFigure 2-15.