HTML5 Canvas Gradient Transparent Mask Over Image

Just thought I should share this tip with you, Now that I have been playing around with Canvas Object in HTML5 for a while I think more tips like these will flow as they used to in past. I’ve been working on a jQuery plugin that will offer something cool, stay tuned for that. This post technique is backbone to that plugin.

Anyway lets get back to the point without wasting more time.

Problem

Canvas Gradient  transparency that could be used as Mask

Step 1

Lets get our Canvas read and draw an Image on it

Markup

Draw Image

By now you would have something like this

A simple transparent gradient example with html5 canvas

Let now add our transparent gradient to out canvas object.

Here is the code for that

Above code should go under where it says CODE SNIPPET 2 in first snippet.

Here is the result

Introduced canvas transparency

You can play around with the colours, I’ve created a Pen at code pen so that you can mess around and find a suitable setting.

You can introduce transparency on both or all 4 sides of above image. You can give it a try.

I hope this helps,

Cheers,

Comments

  1. Great, Thanks for letting me know

  2. This is not transpaency – you are simply adding a white gradient in the most complicated useless way possible.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.