@onbo/canvasfont
v1.0.4
Published
An easy API for drawing text in HTML Canvas in 2d context.
Downloads
19
Readme
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.