Clipping

A clipping path is like a normal canvas shape but it acts as a mask to hide unwanted parts of shapes.

If we compare clipping paths to the globalCompositeOperation property, we see two compositing modes that achieve more or less the same effect in source-in and source-atop. The most important differences between the two are that clipping paths are never actually drawn to the canvas and the clipping path is never affected by adding new shapes. This makes clipping paths ideal for drawing multiple shapes in a restricted area.

To Do

1. Try the following options:
2. Add another element to the canvas after clip path is defined. See the result.
3. Add some elements after restore.
4. Now remove the clip function.

Press run after each change.