< Pete Goodman Web developer >

Labs - Javascript Canvas Letters

Sunday 17th October 2010, 09:17

Here's a little JavaScript experiment with canvas to animate letters. Source code for this is available in github.

Each letter is made up of a small matrix containing 35 numbers, representing 5 columns and seven rows. These are then stored in JavaScript arrays. The image below displays how the letter 'A' is turned into an array.

 
characters = {
	"a": [0,0,1,0,0,0,1,0,1,0,1,0,0,0,1,1,0,0,0,1,1,1,1,1,1,1,0,0,0,1,1,0,0,0,1]
};

When initialising this script, a string of text is passed which renders each letter individually. There are a few optional parameters that control the rendering of the text:

 
var canvasElement = new canvasLetters();
canvasElement.init({
	inline : true,
	canvasId : "canvas-one",
	blockColour : "ff9900",
	canvasColour : "000000",
	blockSize : 5,
	textString : "This is a test.",
	breakWord : false,
	clearance : 5,
	ordering : 'horizontal',
	loop : true,
        speed : 5,
	animate : true
});

It's also possible to create a configurable tool to allow the display of letters to be changed on the fly:

Canvas Letters config

Break words?

Block order

Loop?

Animate?

Sending a message

Here's a little experiment that allows you to create messages and send them to a friend

Comments

Be the first person to comment on this lab...

Please feel free to add a comment

Add a comment

Prove you are human*

* denotes a required field.

Email addresses are for verification only, and will not be published

The RECAPTCHA spam protection enables me to differentiate between genuine human comments and computer-generated spam.