Guide · Open source

How to use Leon Sans: draw animated type on HTML5 Canvas

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. Instead of a font file you install on your computer, it is a JavaScript library that stores each letter as coordinate points, which you draw on an HTML5 Canvas. This guide shows you how to clone the repository, include the library, draw a line of text, and add a drawing animation or weight change.

Leon Sanscmiscm/leonsans · ★ 10.2k · MIT Install options & downloads

Quick start

1Check your prerequisites. Make sure you have a browser with HTML5 Canvas support and basic HTML and JavaScript knowledge.
2Clone the repository. Run git clone https://github.com/cmiscm/leonsans to get the files.
3Include the minified library. Add a script tag pointing to js/leon.js in your HTML, adjusting the path to the file in the dist folder.
4Create a canvas and LeonSans object. Set up a canvas, then create a LeonSans instance with your text, size and weight.
5Draw on each frame. Use requestAnimationFrame to clear the canvas, call position(x, y) and then leon.draw(ctx).
6Add a drawing animation. Include TweenMax and tween each leon.drawing value from 0 to 1.

What you need before you start

Leon Sans is used through JavaScript and the HTML5 Canvas element, so the requirements are a web browser with HTML5 Canvas support and basic knowledge of HTML and JavaScript. The README does not describe installing it as a desktop font.

A web browser with HTML5 Canvas support
Basic knowledge of HTML and JavaScript

Get the Leon Sans files

The README's install instruction is to clone the repository. The library itself is in the dist folder as a minified JavaScript file.

Clone the repository to your computer
Find the minified js file in the dist folder

git clone https://github.com/cmiscm/leonsans

Include Leon Sans in your HTML page

Download the minified js file from the dist folder and include it in your HTML. The README uses js/leon.js as the path in its example, so adjust the path to where you placed the file.

<script src="js/leon.js"></script>

Draw text on the Canvas

Create a canvas, scale it for a higher pixel ratio, then generate a LeonSans object with your text, color, size and weight. Each frame, clear the canvas, centre the text using leon.rect, call position(x, y), and call leon.draw(ctx). The weight option accepts values from 1 to 900, with a default of 1.

The example uses requestAnimationFrame to redraw continuously, which is what lets the text respond to animation.

text: the text to show, with \n for line breaks
size: the size of the text
weight: 1 to 900, default 1
color: an array of colours, default ['#000000']
align: left, center or right

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

Add a drawing animation with TweenMax

For the drawing animation, the README asks you to include TweenMax, a JavaScript animation library, in your HTML. Then loop over leon.drawing and tween each value from 0 to 1. A value of 0 is the start of the animation and 1 is the end. The delay of i * 0.05 staggers each character slightly.

Include TweenMax before your own script
Each entry in leon.drawing is one character

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Animate the drawing values

Once TweenMax is loaded, update every drawing value from 0 to 1 as shown below.

let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
    TweenMax.fromTo(leon.drawing[i], 1.6, {
        value: 0
    }, {
        delay: i * 0.05,
        value: 1,
        ease: Power4.easeOut
    });
}

Explore the options and methods

Beyond the basic options, the README lists settings for spacing, wave effects and colour patterns, plus methods for drawing in other ways. Read the option list in the repository before adding more features.

The README also lists draw(ctx) for the Canvas, drawColorful(ctx) for the colourful effect, and drawPixi(graphics) for WebGL with PIXI.js. updateDrawingPaths() is described as very expensive, so call it only when needed.

tracking and leading: spacing between characters and lines
pathGap: gap between coordinate points, 0 to 1, default 0.5
isWave and amplitude: wave effect, amplitude 0 to 1
maxWidth and breakWord: wrap text to a width
on() and off(): add or remove an update event
position(x, y): set where the text is drawn

What people use it for

Animated headlines on a web page drawn on a Canvas
Experiments with changing font weight dynamically in code
Creative coding projects that use type as a visual effect
Studying the live examples for wave, metaball and colour pattern effects

Frequently asked questions

What is Leon Sans?

Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. Each letter is stored as coordinate points, which lets developers change its weight, animate it or draw custom effects on an HTML5 Canvas.

How do I install Leon Sans?

The README's install method is to clone the repository with git clone https://github.com/cmiscm/leonsans. You then include the minified js file from the dist folder in your HTML page with a script tag.

Is Leon Sans free to use?

Leon Sans is released under the MIT licence, as listed on its repository. Check the licence file in the repository for the full terms before using it in your project.

Can I use Leon Sans as a font on my computer or in Word?

No, the README only describes using Leon Sans through JavaScript and the HTML5 Canvas. It does not describe installing it as a desktop font or using it in print tools.

What are alternatives to Leon Sans?

The README lists Typeface.js, Opentype.js and p5.js as comparable projects. Typeface.js and Opentype.js are typically used for working with font data in JavaScript, while p5.js is a creative coding library.

Is Leon Sans actively maintained?

The last push to the repository was in September 2020 and no release is listed. For a project that needs a stable, actively maintained library, consider the alternatives listed in the README instead.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Leon Sans suits web developers, designers and creative coders who want animated or interactive headline text on a Canvas, and who are happy to read the code and examples. If you need a font file for desktop or print, or a library with active maintenance and releases, pick a different tool such as one of the comparable projects listed in the README.

Install options & downloads