Xomino

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

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

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

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