Animated text fill using HTML5 Canvas


fillStyle with the opacity set to zero will not (using fillText) poke a hole to the html layer underneath. None the less using green screening it is possible to make transparent lettering so that the fill of the lettering can be animated.

The HTML I will use for this example is …

<style>
#green, #fill, #top{
	position:absolute;
	top:0px;
	left:0px;
}
#wrapper {
	position:relative;
	width:960px;
	height:300px;
}
</style>
<div id="wrapper">
<canvas id="green" width="960" height="300"></canvas>
<canvas id="fill" width="960" height="300"></canvas>
<canvas id="top" width="960" height="300"></canvas>
</div>

Three canvas elements are not needed but it makes the process easy to visualize and troubleshoot.

For the proof of concept all that is needed is a plain fill –

<script>
	var canvasfill = document.getElementById('fill');
 	var ctxfill = canvasfill.getContext('2d');

	ctxfill.fillStyle = "#88f";
	ctxfill.fillRect(0,0,960,300);
</script>

The fill can be any html content or video. The background for the main canvas will start as white – it really does not matter because when we do the lettering the only thing that will change is that certain pixels will become transparent.

<script>
	var canvastop = document.getElementById('top');
 	var ctxtop = canvastop.getContext('2d');

	ctxtop.fillStyle = "#fff";
	ctxtop.fillRect(0,0,960,300);
</script>

Black lettering on a white background produce the best anti-aliasing results. Anti-aliasing removes pixel level corners.

<script>
	var canvasgreen = document.getElementById('green');
 	var ctxgreen = canvasgreen.getContext('2d') ;

// antialiasing works best with black letters on a white background.

	ctxgreen.fillStyle = "#ffffff";
	ctxgreen.fillRect(0,0,960,300);

 	ctxgreen.fillStyle = "#000000";
 	ctxgreen.font = "60px Arial";
 	ctxgreen.fillText("Transparent text shows",25,100);
 	ctxgreen.fillText("Animatable fill layer",25,200);
</script>

The function that is called to make the black lettering transparent only needs to copy the green channel from the green screening canvas to the apha channel of the top canvas.

<script>
// moves ctxgreen green channel to the alpha channel of ctxTop
function BlackTransparent() {

	var sourceimg = ctxgreen.getImageData(0, 0, 960, 300);
	var sourcedata = sourceimg.data;
	var targetimg = ctxtop.getImageData(0, 0, 960, 300);
	var targetdata = targetimg.data;

	for (var i = 0, n = sourcedata.length; i < n; i += 4) {
		targetdata[i+3] = sourcedata[i+1];
	}
	ctxtop.putImageData(targetimg , 0, 0);

}
BlackTransparent()
</script>

That is it.

All that is left to do is animate the fill canvas to create text effects better than those seen on TV which are beginning to look more and more like web sites everyday.

Advertisements

3 responses

  1. Sounds great, but where’s the link for the example?

  2. […] the transparent letter was discussed and source code shown several weeks ago.  Animated Text Fill but no link was created demonstrating the effect. The desired effect is of course to make the […]

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

%d bloggers like this: