Mozilla Hacks

The HTML5 canvas clip method

By Robert Nyman [Editor emeritus]

Posted on July 27, 2011 in Canvas and HTML

HTML5 canvas offers a lot of interesting ways to create effects and experiences on the web. One of the methods to do that, which seem lesser known, is canvas clip.

I wrote about it in Using the HTML5 canvas clip method to hide certain content, showing how to stage content and create a looking glass effect. You could also see it in action in the canvas clip demo.

You could also read up more on it in the Clipping paths in the Compositing article on MDN and learn how to create some interesting combinations.

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

One comment

  1. Jared Williams

    I think it could be a little less tricky to make use of. I recently used the .clip() method to crop facebook profile images pulled into a json obj into circles which were drawn at different sizes based on some stuff, and well, there’s a lot more to it than just that, ALOT.

    But my point is that it was tricky to get the clipping part to work properly. I had to fiddle with it for a while, finally got it to be good though, it is definitely useful but could be better.

    October 4th, 2011 at 10:16

Comments are closed for this article.