Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from Painting the Web

Layering and Clipping

Two other object modifications that can control the appearance of the canvas are clipping—controlling what is or is not drawn—and the globalCompositeOperation property, which determines how new objects are layered in relation to existing objects.

Clipping

Clipping isn't quite descriptive: you define an area where drawing is allowed, creating a "mask" over the rest of the canvas area and preventing any drawing in the masked area. It's somewhat like cutting a hole in cardboard, putting it over paper, and then drawing over the hole—the coloring only shows in the uncovered area. Clipping works on a path, which can be built with any path function: arc, line, or the curves.

Example 11-7 creates a large circular clipping path, then creates 20 random circles, many within the clipping path, some on the edge, and others outside the clipping path.

Example 11-7. Clipping circles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clipping Circles</title> <script type="text/javascript" src="addingajax.js"> </script> <script type="text/javascript"> //<![CDATA[ aaManageEvent(window,"load",setup); // generate random function random(max) { return Math.round(max*Math.random( )); } // generate random color function randomColor( ) { var color= "rgb(" + random(255) + "," + random(255) ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page