Stencil.js – (Applying a transparent CANVAS mask) – I need some suggestions

In this article I am going to show you how I created stencil.js – A technique for making a transparent mask on top of an image. But I am a little lost as to what to do with the technique now I have created it – any suggestions would be gratefully received and much appreciated.

Example

So I have been working on this idea for a couple of weeks and I finally figured out how to make the technique work whereby you can draw a picture ontop of a web font text (or make it look like that anyway)

Drawing a picture on top of web based text
Drawing a picture on top of web based text

I think it is kinda cool – shame the font has sharp edges and isn’t feathered but hey.

How does it work?

So what I am actually doing is taking an image

An image
An image

Drawing a “<CANVAS>” element on top of it and writing some text onto the canvas (so no IE)

Writing some text onto the canvas
Writing some text onto the canvas

Then I make all the red pixels on the canvas have opacity=0 (i.e. see through) and everything else color white with opacity 255 (not see through)

It is easier to see the effect if I make the white canvas slightly opaque – in this image you can JUST see the original as I have set it to 225 not 255.

This canvas manipulation was what I found Patrick Wied had used in making the watermark.js plugin which I wrote about earlier in the year. Each pixel in the canvas can be manipulated with the RGB value and Opacity – so I can make anything white and or transparent.

If you want to see it in actiion go to the jsFiddle I have created: http://jsfiddle.net/mdroden/aefh4/

Or if you think you can improve it – git it – https://github.com/markyroden/stencil

So I need suggestions….

The plan is to turn this into a jQuery plugin – but for what purpose? Other than a demonstration of it can be done – what’s the good practical usage for it. And then from that what variables are required to make the end result work?

In the jsFiddle example I pass in the Text, font and font-size. But there are also some tweaking to be done to position the text optimally over the image – and this varies based on the font and the size. I used Fascinate because it was a “fat” font and therefore showed a lot of the background image……Probably the transparency of the “white” mask could be a variable as well.

I am thinking something like this


$('#image').stencil({
	text: 			"XOMINO",
	font-family: 	"fascinate",
	font-size: 		70,
	text-positionX:	10,
	text-positionY:	30,
	text-color:	"red",
	mask-opacity:	255
}

I have a lot of balls in the air what with MWLUG and a new job in the offing but I will come back to this and at least make a basic plugin for it….

So how would you use it?

Marky

2 thoughts on “Stencil.js – (Applying a transparent CANVAS mask) – I need some suggestions

    • In many of these examples a pre-determined transparent PNG has been used to make a specific effect happen. I am sure that is also less processor intensive than cycling through every pixel in the image.

      What Stencil.js does though is create a dynamic transparency in the fly.

      But like science research, just ‘cos I can’t think of a good use for the technique does not mean that other people won’t – such is the joy of publishing 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s