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
});
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);
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.