< Pete Goodman Web developer >

Labs - Javascript Canvas Letters Banner

Sunday 31st October 2010, 09:12

Here's a variation on the original Canvas Letters experiment. This time the words scroll as a banner rather than animating in at fixed positions. As before, source code for this is available in github.

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 canvasLettersBanner();
canvasElement.init({
 inline : true,
 canvasId : "canvas-one",
 blockColour : "ff9900",
 canvasColour : "000000",
 textString : "This is a test.",
 clearance : 5,
 speed : 5
});

As before, it's possible to create a configurable tool to allow the display of letters to be changed on the fly:

Canvas Letters config

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.