Javascript Canvas Letters

Details

Technologies/Skills

  • JavaScript
  • Canvas

Overview

Here’s a little JavaScript experiment with canvas to animate letters.

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.

1
2
3

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Desktop Screenshots