1 / 6

Talk about different ways to clear Canvas Add context.ClearRect

Talk about different ways to clear Canvas Add context.ClearRect Add any API calls left out of first version context.getImageData () context.putImageData (). API. http://dev.w3.org/html5/2dcontext/#line-styles http://dev.w3.org/html5/2dcontext/#building-paths

tyrone
Download Presentation

Talk about different ways to clear Canvas Add context.ClearRect

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Talk about different ways to clear Canvas Add context.ClearRect Add any API calls left out of first version context.getImageData() context.putImageData()

  2. API • http://dev.w3.org/html5/2dcontext/#line-styles • http://dev.w3.org/html5/2dcontext/#building-paths • http://dev.w3.org/html5/2dcontext/#fill-and-stroke-styles • http://dev.w3.org/html5/2dcontext/#the-current-default-path • http://dev.w3.org/html5/2dcontext/#drawing-rectangles-to-the-canvas • http://dev.w3.org/html5/2dcontext/#shadows • http://dev.w3.org/html5/2dcontext/#drawing-model

  3. API AdditIons • void drawSystemFocusRing(Element element); • booleandrawCustomFocusRing(Element • element); void scrollPathIntoView(); void clip(); • booleanisPointInPath(double x, double y);

  4. ERRATA • Page 32: squareA rectangle with the length of the line width and the width of half the line width placed flat perpendicular to the edge of the line.should be:A rectangle with the length of the line width and the HEIGHT of half the line width placed flat perpendicular to the edge of the line. • Page 41: The globalCompositeOperation should be set to destination-over to get the results shown in Figure 2-11. Setting it to destination-atop, as printed, clips the image outside the newly-drawn square. • Page 44: This line:y+.05*heightShould be:y+0.5*heightAlso:context.translate(x+.05*width, y+.05*height)Should be:context.translate(x+0.5*width, y+0.5*height)

  5. ERRATA • Page 52: Both the rgb() and rgba() examples need quotes around them, same as the hex example. So:context.fillStyle = rgb(255,0,0);should be:context.fillStyle = "rgb(255,0,0)";ANDcontext.fillStyle = rgba(255,0,0);should be:context.fillStyle = "rgba(255,0,0)"; • Page 37 : I found the first line "Combing the save() and restore()..." very confusing, as I don't believe that save() nor restore() have anything to do with clipping per se. The save() in Example 2-5 saves the current non-clipped state of the canvas, and allows the subsequent restore() to revert back to not clipping anything, but since we haven't been introduced to save() and restore() yet, they detract from how to use clip(). Would suggest that this section be expanded to first explain clip(), and THEN show how to save()/restore() states. (Or, explain save() and restore() first, as they can be applied to things we have learned, then go on to clip().)

  6. ERRATA

More Related