CanvasText v0.4

An easy way to draw styled text into your HTML5 Canvas.

What's CanvasText?

If you usually work with HTML5 Canvas, you will know for sure the difficulty of drawing styled text into it.

CanvasText is a library written in JavasScript that lets you write styled text easier and with a similar HTML & CSS syntax.

I decided to create it while developing a game in HTML5 Canvas and saw the difficulties presented when drawing styled text.

New documentation page. Version 0.4.1 released (06 September 2011).

A simple comparison

First of all, let's see the final result of both codes:

What's the difference between using CanvasText or not?

With CanvasText

var CanvasText = new CanvasText;

CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

CanvasText.defineClass("blue",{
    fontSize: "24px",
    fontColor: "#29a1f1",
    fontFamily: "Impact",
    fontWeight: "normal"
});

CanvasText.defineClass("pink",{
    fontSize: "24px",
    fontColor: "#ff5e99",
    fontFamily: "Times new roman",
    fontWeight: "bold"
});

var text = 'I like <class="blue">blue</class> color but I also like <class="pink">pink</class> color!';
text += '<br />Nevermind, I prefer <class="blue">blue</class> to <class="pink">pink</class>... ;)!';

CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

Advantatges:

  • Short and clean code.
  • Easy to maintain.
  • Low execution time (cache system).
  • Similar to HTML & CSS syntaxes.
  • Automatic line break.
  • One-line paragraph.
  • Class support.
  • In-line style support.

Without CanvasText

var canvas  = document.getElementById("canvas");
var context = canvas.getContext('2d');
var Red = "#ff5e99";
var Blue = "#29a1f1";
var Black = "#000";
var x = 10;
var y = 40;
var txt_p1 = "I like ";
var txt_p2 = "blue";
var txt_p3 = " color but I also like ";
var txt_p4 = "pink";
var txt_p5 = " color!";
var txt_p6 = "Nevermind, I prefer ";
var txt_p7 = " to ";
var txt_p8 = "... ;)!";

context.font = '14px Verdana';
context.fillStyle = "#000000";
context.fillText(txt_p1,x,y);
x += context.measureText(txt_p1).width;

context.save();
context.font = 'normal 24px Impact';
context.fillStyle = Blue;
context.fillText(txt_p2,x,y);
x += context.measureText(txt_p2).width;
context.restore();

context.fillText(txt_p3,x,y);
x += context.measureText(txt_p3).width;

context.save();
context.font = 'bold 24px Times New Roman';
context.fillStyle = Red;
context.fillText(txt_p4,x,y);
x += context.measureText(txt_p4).width;
context.restore();

context.fillText(txt_p5,x,y);
x += context.measureText(txt_p5).width;

y+= 24;
x = 10;

context.fillText(txt_p6,x,y);
x += context.measureText(txt_p6).width;

context.save();
context.font = 'normal 24px Impact';
context.fillStyle = Blue;
context.fillText(txt_p2,x,y);
x += context.measureText(txt_p2).width;
context.restore();

context.fillText(txt_p7,x,y);
x += context.measureText(txt_p7).width;

context.save();
context.font = 'bold 24px Times New Roman';
context.fillStyle = Red;
context.fillText(txt_p4,x,y);
x += context.measureText(txt_p4).width;
context.restore();

context.fillText(txt_p8,x,y);

Disadvantatges:

  • Exponential increase of code.
  • Exponential increase of complexity.
  • High execution time (no cache).
  • Divided paragraph.
  • Manual line break.
  • Code repetition.
  • Lots of var declarations.
  • Looong, uncleaaan and boooring code.