Skip to main content
Version: 9.0.3

canvas.drawText

canvas.drawText(text, attrs)

Draw a string within the canvas directed by the user-specified properties.

Parameters​

ParameterTypeDescription
textstringThe text string to display.
attrsobjectAn object of properties containing information about how to draw the text.  See Draw Text Options below.

Draw Text Options​

KeyTypeDescription
fontstringThe font to use to render the text (required, no default).
xnumberThe x position of the upper left corner of the image (default: 0).
ynumberThe y position of the upper left corner of the image (default: 0).
sizenumberThe point size to render the text at (default: 18).
colornumberThe color to render the text in (default: black: 0x000000).
rotationnumberThe angle in degrees to render the text at (default: 0).

Example​

// Draw a hello world string centered on the canvas
function DrawCenteredText(name) {   
var msg = "Hello World";   
var canvas = sb.getCanvas(name);   
var attrs = {font : "fonts/RobotoBold.ttf", size : 24, x : 0, y : 0};   
var strSize = sb.getStringSize(attrs.font, attrs.size, msg, 0);   
attrs.x = (canvas.width - strSize.width) / 2;   
attrs.y = (canvas.height - strSize.height) / 2;   
canvas.drawText("Hello World", attrs);
}