JavaScript Canvas Letters Banner

Details

Technologies/Skills

  • JavaScript
  • Canvas

Overview

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.

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:

1
2
3
4
5
6
7
8
9
10

var canvasElement = new canvasLettersBanner();
canvasElement.init({
    inline : true,
    canvasId : "canvas-one",
    blockColour : "ff9900",
    canvasColour : "000000",
    textString : "This is a test.",
    clearance : 5,
    speed : 5
});