It's possible to display text on canvas, using the methods below:
| Method | Description |
|---|---|
| direction | Sets or returns the direction used to draw text; ltr (left to right) or rtl (right to left), or inherit |
| fillText() | Draws "filled" text on the canvas |
| font | Sets or returns the font properties for text content |
| measureText() | Returns an object that contains the width of the specified text |
| strokeText() | Draws text on the canvas |
| textAlign | Sets or returns the alignment for text content |
| textBaseline | Sets or returns the text baseline used when drawing text |
Example 1: it generates the top left figure in this page.
function CanvasDraw_text() {}
CanvasDraw_text.prototype.onDrawBackground = function(ctx) {
ctx.font = "30px Verdana"; // fontsize and name
ctx.direction = "rtl"; // set text display direction
ctx.fillText("#right to left!", 200, 50); // display text at (200, 50)
ctx.direction = "ltr"; // ltr or rtl
ctx.fillText("#left to right!", 200, 50);
const text = "Smile, you are on camera"
ctx.strokeText(text + ': width=' + Math.round(ctx.measureText(text).width), 10, 90) // use measureText method to get width
ctx.strokeStyle = "red";
ctx.moveTo(300, 150); ctx.lineTo(300, 310); ctx.stroke(); // draw reference line
// textAlign
ctx.textAlign = "start"; ctx.fillText("textAlign = start", 300, 170);
ctx.textAlign = "end"; ctx.fillText("textAlign = end", 300, 200);
ctx.textAlign = "left"; ctx.fillText("textAlign = left", 300, 230);
ctx.textAlign = "center"; ctx.fillText("textAlign = center", 300, 260);
ctx.textAlign = "right"; ctx.fillText("textAlign = right", 300, 290);
ctx.moveTo(0, 400); ctx.lineTo(500, 400); ctx.stroke(); // draw reference line
// textBaseline
ctx.textBaseline = "top"; ctx.fillText("Top", 20, 400);
ctx.textBaseline = "bottom"; ctx.fillText("Bottom", 100, 400);
ctx.textBaseline = "middle"; ctx.fillText("Middle", 210, 400);
ctx.textBaseline = "alphabetic"; ctx.fillText("Alphabetic", 380, 400);
ctx.textBaseline = "hanging";ctx.fillText("Hanging", 520, 400);
}
LiteGraph.registerNodeType("canvas/CanvasDraw_text", CanvasDraw_text);
Example 2: a litegraph node with widgets to customize the text display.
function CanvasDraw_customize_text() {
this.text = this.addWidget("text", "text", "Say something!!!")
this.x = this.addWidget("slider","position x", 20, {min: 0, max: 300, step: 10, precision: 0})
this.y = this.addWidget("slider","position y", 20, {min: 0, max: 100, step: 10, precision: 0})
this.fillStyle = this.addWidget("combo","fillStyle", "red", {values:["red", "blue", "green", "black", "cyan", "yellow", "orange", "purple"]})
this.fontsize = this.addWidget("slider","fontsize", 100, {min: 1, max: 200, step: 10, precision: 0})
this.fontname = this.addWidget("combo","fontname", "Brush Script MT", {values:["Arial", "Verdana", "Tahoma", "Trebuchet MS", "Times New Roman",
"Georgia", "Garamond", "Courier New", "Brush Script MT"]})
this.direction = this.addWidget("combo","direction", "ltr", {values:["ltr", "rtl", "inherit"]})
this.textAlign = this.addWidget("combo","textAlign", "left", {values:["start", "end", "left", "right", "center"]})
this.textBaseline = this.addWidget("combo","textBaseline", "middle", {values:["top", "bottom", "middle", "alphabetic", "hanging"]})
}
CanvasDraw_customize_text.prototype.onDrawBackground = function(ctx) {
const yoffset = this.flags.collapsed ? 30 : 250;
ctx.save()
ctx.font = `${parseInt(this.fontsize.value)}px ${this.fontname.value}`;
ctx.direction = this.direction.value;
ctx.textAlign = this.textAlign.value;
ctx.textBaseline = this.textBaseline.value;
ctx.fillStyle = this.fillStyle.value;
ctx.fillText(this.text.value, this.x.value, parseInt(this.y.value) + yoffset);
ctx.restore()
}
LiteGraph.registerNodeType("canvas/CanvasDraw_customize_text", CanvasDraw_customize_text);
© 2025