Animated Rainbow Text with JavaScript and Canvas

Preview:

Description:

Draws animated rainbow text on a canvas element using html5 canvas 2D API and Javascript requestAnimationFrame method.

How to use it:

Create an html5 canvas element on your html page.

<canvas id="demo"></canvas>

The requestAnimationFrame polyfill.

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

Config the rainbow text.

var c = document.getElementById("demo");
var bc = document.createElement("canvas");
var ctx = c.getContext("2d");
var bCtx = bc.getContext("2d");
var cw = c.width = bc.width = 750,
    cx = cw / 2;
var ch = c.height = bc.height = 130,
    cy = ch / 2;
var rad = Math.PI / 180;
var maxParticles = 60;
var speed = .015;
var text = "CSSSCRIPT";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "120px Arial black";
ctx.lineWidth = 2;
ctx.strokeStyle = "#555";
ctx.fillStyle = "rgb(0,0,0)";

The JavaScript to create animated particles for the text background.

var particlesRy = new Array();

function particles() {

  this.x = Math.round(Math.random() * cw) + 1;
  this.y = Math.round(Math.random() * ch) + 1;
  this.r = randomIntFromInterval(20, 60)
  this.color = "hsl(" + (Math.round(Math.random() * 360) + 1) + ",100%,50%)";
  this.pm = Math.random() < 0.5 ? -1 : 1; //plus or minus
  this.drift = this.pm * speed;
  this.fall = this.pm * speed;
}

function createParticles() {
  var l = particlesRy.length
  particlesRy[l] = new particles();
  bCtx.fillStyle = particlesRy[l].color;
  bCtx.beginPath();
  bCtx.arc(particlesRy[l].x, particlesRy[l].y, particlesRy[l].r, 0, 2 * Math.PI);
  bCtx.fill();
}

function updateParticles() {
  bCtx.clearRect(0, 0, cw, ch);
  for (var j = 0; j < particlesRy.length; j++) {
    if (particlesRy[j].x >= cw || particlesRy[j].x <= 0) {
      particlesRy[j].drift = -1 * particlesRy[j].drift;
    }
    if (particlesRy[j].y >= ch || particlesRy[j].y <= 0) {
      particlesRy[j].fall = -1 * particlesRy[j].fall;
    }
    particlesRy[j].y += particlesRy[j].fall;
    particlesRy[j].x += particlesRy[j].drift;

    bCtx.fillStyle = particlesRy[j].color;
    bCtx.beginPath();
    bCtx.arc(particlesRy[j].x, particlesRy[j].y, particlesRy[j].r, 0, 2 * Math.PI);
    bCtx.fill();
  }

}

Draw the text on the canvas element.

window.addEventListener("load", function() {

  for (var i = 0; i < maxParticles; i++) {
    createParticles();
    bCtx.globalCompositeOperation = "xor";
  }

  drawText();

  requestId = window.requestAnimationFrame(Draw);

}, false)

function Draw() {
  for (var i = 0; i < maxParticles; i++) {
    updateParticles();
    bCtx.globalCompositeOperation = "xor";
  }

  drawText();

  requestId = window.requestAnimationFrame(Draw);
}

function drawText() {
  ctx.beginPath();

  ctx.fillText(text, cw / 2, ch / 2);
  ctx.strokeText(text, cw / 2, ch / 2);

  ctx.globalCompositeOperation = "source-atop";

  var img = bc;
  ctx.drawImage(img, 0, 0);
}

function randomIntFromInterval(mn, mx) {
  return ~~(Math.random() * (mx - mn + 1) + mn);
}