canvasfont

An easy API for drawing text in HTML Canvas in 2d context.

Features:

• Easy management of font attributes
• Anchoring

Drawing text

Drawing functions are similar to 2D context functions.

let font = new CanvasFont( canvas );

font.fillText( 50, 50, "Hello World!" );
font.strokeText( 50, 100, "How are you?" )

Setting attributes

CanvasFont allows for seperate assignment of font attributes, such size, family and style.

Examples:

font.fontSize   =  24;
font.fontFamily = "monospace";
font.fontStyle  = "italic";

Text anchoring.

Anchoring allows for placing text relative to a point in many positions.

Supported anchors are:

• TopLeft
• TopCenter
• TopRight
• Left
• Center
• Right
• BottomLeft
• BottomCenter
• BottomRight

which are found in CanvasFont.FontAnchors

Example:

font.fillText( 50,  50,  "TopLeft");    // TopLeft is default.
font.fillText( 100, 100, "Center",      CanvasFont.fontAnchors.Center )
font.fillText( 150, 150, "BottomRight", CanvasFont.fontAnchors.BottomRight );

Demo of all anchors found in demo/ folder.

Build

Simply use webpack to make a bundle for web use.