Happy Text

A sine function driving letters on the screen

by Victor Ribeiro

CSS

body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

JavaScript

const canvas = document.createElement('canvas');
const w = innerWidth,
  h = innerHeight,
  w2 = w / 2,
  h2 = h / 2;
canvas.width = w;
canvas.height = h;

document.body.appendChild(canvas);

const c = canvas.getContext('2d');
const fontsize = 30;
c.font = fontsize + "px Arial";

let text = "Happy Text!";

let a = 0;

const xoffset = c.measureText(text).width;

function draw() {
  c.clearRect(0, 0, w, h);
  for (let i = 0; i < text.length; i++) {
    c.fillText(text[i],
      (w2 - xoffset) + (i * fontsize),
      h2 + (Math.sin(a - i) * 10));
  }
  a += 0.08;
  requestAnimationFrame(draw);
}

draw();