Canvas Text

Font property is used to draw text on a canvas. It defines font properties for text, it has some css values such as style, size etc.

Syntax

var variableName = canvas.getContext(2d);
variableName.font="fontSize fontStyle";

FillText(text,x,y)

FillText method is used to fill or insert text on canvas at given position by using co-ordinates (x,y).

Syntax

var variableName = canvas.getContext(2d);
variableName.fillText("text", x,y);

FillStyle

FillStyle property is used to style text with color.

Syntax

var variableName = canvas.getContext(2d);
variableName.fillStyle="colorValue";

StrokeText(text,x,y)

StrokeText method is used to to draw text on canvas but without fill at given position using co-ordinates (x,y).

Syntax

var variableName = canvas.getContext(2d);
variableName.strokeText("text", x,y);

StrokeStyle

StrokeStyle property is used to style text with color. It is used instead of fillStyle property used in fillText method.

Syntax

var variableName = canvas.getContext(2d);
variableName.strokeStyle="colorValue";

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id <text> to canvas element
• Give width and height of 200 100 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid purple
• Use javascript to draw text on canvas by using fillText or strokeText methods

save file with name task.html or task.htm and then open it using any browser and see results.