I just added a small demo to my GitHub showing how you can do image masking by using the canvas element.

All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. For example:

<img src="red-panda.jpg" 
     alt="Red panda" 
     class="mask" 
     data-mask="centerblur.png">

This will take the centerblur.png file and apply it as a mask to red-panda.jpg – in effect taking the alpha of each pixel and change the alpha of the original pixel to that.

You can see it in action here and get the code on GitHub.

Under the hood, all I do is loop through all the pixels of the images (after copying them to two canvas elements) and apply the alpha values (every 4th value in the pixeldata array) of the PNG to the image. Simple, really :)

As mentioned by Jake Archibald on Twitter there is no need to loop over the pixels of the images, all you need is to copy the mask first, then change the canvas compositing to source-atop and add the image. Done. The script does that now, and thus is much faster.

I get a lot of emails regarding my blog and many people offer to write guest posts, give me infographics to publish or blatantly ask for google juice for their services. This can get annoying, especially when it is obvious spam or link farmning or the people sending me mail don’t even bother reading my blog beforehand.

From time to time, you do get some gems though, like the other day when Jack Collins contacted me with this email:

Hi Christian, My name is Jack, and I’m hoping to get in touch with you about a video I helped create that explores the psychology of internet trolls. I saw this post “De-trolling the web – don’t post in anger“, and thought you and your readers might find some value in it. The video highlights the phenomenon of the online disinhibition effect. Let me know if it’s something you’d be interested in seeing or sharing, and I can forward it along. Thanks for your time, Jack Collins

I was intrigued, answered Jack and got a second mail with the link to this video. I love it – it is a great example how to present research information in a short, informative and creative way. Whilst I am utterly tired of rage comics and consider them a massive waste of bandwidth and perceived creativity it makes sense to use them here to show what the research was about. I learned a few things, for example I did not know trolling came from fishing and that there were even trolls on ham radio in the past. The best, however is the advice at the end.

Trolling is not a game of solitaire. Unless we want to actively suppress freedom of speech, the only way to beat a troll is to not play the game.

In other words – don’t feed the troll.

A strange game. The only winning move is not to play. How about a nice game of chess?

You can watch the video and read the transcript of The Psychology of the Internet Troll or use the embed below.

Created by AcademicEarth.org

Creating rollovers is easy. Much easier than it was in the past with the infamous MM_mouseover at least. It gets tricky though when you want to have the rollover only happen on a certain shape and not only in a rectangular area.

There are many solutions to this, like SVG masking or adding lots of rectangular overlays that make up the desired shape, but I wanted to have a simple solution. You can see the solution working here in this GIF:

What I am doing here is adding PNGs (courtesy Game Icons) with transparency to the HTML and give them a class of rollover:

<img 
     src="bottle.png" 
     alt="bottle vapours" 
     class="rollover">
<img src="burning-embers.png" 
     alt="burning embers" 
     class="rollover">

The transparent part of the PNG will be what should not trigger the rollover, and all other pixels should.

The JavaScript is pretty simple and based on the principles used in the letterpaint game I just explained on Mozilla Hacks.

• Loop over all images with the class “rollover”
• Add a mouseover, mouseout and mousemove event to each
• On mouseover, take the image and copy it to an invisible Canvas element
• On mousemove, find out the x and y position of the mouse cursor and read the colour of the pixel at this position from the canvas
• If the pixel has an opacity of 0, it is transparent, which means remove the “over” class from the image.
• If the pixel is not opaque, add the class “over” to the image.

You can try this out here.

The source code is on GitHub.

This seems to be a very simple way to have irregular shaped rollovers. You could enhance the hover() function to also react differently depending of which part of the shape you are on. You can also add touch handlers easily. The only caveat is that the images and the JavaScript need to be on the same domain or the canvas is not allowed to access the pixels of the image.