Skip to content

t3rminus/fontbrite

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits

README.md

README.md

 
 

fontbrite.js

fontbrite.js

 
 

Repository files navigation

FontBrite

A Javascript HTML5 canvas bitmap font renderer, with color-changing abilities. Additional examples coming soon.

Examples

Example font definition

 var fontMetrics = {
    'img': 'images/font3.png', // Can be either pre-loaded DOMElement or img src
    'space': 5, // Width of spaces
    'tab': 15, // Width of tabs
	
	// Character definition
	'character': [top-left x, top-left y, width, height, line height (optional)],
	
	// Example with numbers
    '0': [0,1,8,11],
    '1': [10,1,5,11],
    '2': [20,1,8,11],
    '3': [30,1,8,11],
    '4': [40,1,8,11],
    '5': [50,1,8,11],
    '6': [60,1,8,11],
    '7': [70,1,8,11],
    '8': [80,1,8,11],
    '9': [90,1,8,11]
};

API

FontBrite

Kind: global class
Access: public

new FontBrite(ctx)

FontBrite - The awesome color-changing bitmap font rendererer

Param Type Description
ctx object A canvas context that will be used for output

fontBrite.getFont(name) ⇒ object

Retrieves font metrics for a defined font

Kind: instance method of FontBrite
Returns: object - The font metrics object
Access: public

Param Type Description
name string The name of the font to load

fontBrite.defineFont(metrics, name) ⇒ string

Defines (stores) font metrics with a name

Kind: instance method of FontBrite
Returns: string - The name of the defined font
Access: public

Param Type Description
metrics object The metrics object, with dimensions of each character, and source image
name string The name of the font to define

fontBrite.getStringHeight(font, string) ⇒ number

Gets the height of the string for the given font (single lines only)

Kind: instance method of FontBrite
Returns: number - The height
Access: public

Param Type Description
font string The name of a defined font to use
string string The string to get the height of

fontBrite.getStringWidth(font, string) ⇒ number

Gets the width of the string for the given font (single lines only)

Kind: instance method of FontBrite
Returns: number - The width
Access: public

Param Type Description
font string The name of a defined font to use
string string The string to get the width of

fontBrite.renderLine(font, string, x, y) ⇒ number

Renders a single line of text in the given font

Kind: instance method of FontBrite
Returns: number - The bottom y-coordinate of the rendered line
Access: public

Param Type Description
font string The name of a defined font to use
string string The string to render
x number The x-coordinate of the top-left of the output
y number The y-coordinate of the top-left of the output

fontBrite.renderBlock(font, string, [x], [y], [w], [h], [lh]) ⇒ number

Renders a block (paragraph) of text in the given font

Kind: instance method of FontBrite
Returns: number - The bottom y-coordinate of the rendered line (may be different from y + h, due to font/line height)
Access: public

Param Type Default Description
font string The name of a defined font to use
string string The string to render
[x] number 0 The x-coordinate of the top-left of the block
[y] number 0 The y-coordinate of the top-left of the block
[w] number Remaining space in canvas The desired width of the block. Long lines will be wrapped on whitespace
[h] number Remaining space in canvas The desired height of the block. Long blocks will be truncated
[lh] number Height of each rendered line The desired line height of each line in the block

fontBrite.colorizeFont([name], font, h, [s], [l]) ⇒ string

Colorizes a font, replacing hot pink in any shade (r === b), with a desired color

Kind: instance method of FontBrite
Returns: string - The name of the defined font
Access: public

Param Type Default Description
[name] string "font__h_s_l" The stored name of the resulting font
font string The name of a defined font to use
h number The hue to colorzie the font to
[s] number 100 The saturation to use when colorizing the font
[l] number Source pixel luminosity The luminosity to use when colorizing the font

FontBrite.hslToRgb(h, s, l) ⇒ Object

Converts an HSL color to RGB

Kind: static method of FontBrite
Returns: Object - The output containing the RGB values for that color
Access: public

Param Type Description
h number The input hue (0-360)
s number The input saturation (0-100)
l number The input luminosity (0-100)

FontBrite.rgbToHsl(r, g, b) ⇒ Object

Converts an RGB color to HSL

Kind: static method of FontBrite
Returns: Object - The output containing the HSL values for that color
Access: public

Param Type Description
r number The input red component
g number The input green component
b number The input blue component

FontBrite : object

Kind: global namespace

new FontBrite(ctx)

FontBrite - The awesome color-changing bitmap font rendererer

Param Type Description
ctx object A canvas context that will be used for output

fontBrite.getFont(name) ⇒ object

Retrieves font metrics for a defined font

Kind: instance method of FontBrite
Returns: object - The font metrics object
Access: public

Param Type Description
name string The name of the font to load

fontBrite.defineFont(metrics, name) ⇒ string

Defines (stores) font metrics with a name

Kind: instance method of FontBrite
Returns: string - The name of the defined font
Access: public

Param Type Description
metrics object The metrics object, with dimensions of each character, and source image
name string The name of the font to define

fontBrite.getStringHeight(font, string) ⇒ number

Gets the height of the string for the given font (single lines only)

Kind: instance method of FontBrite
Returns: number - The height
Access: public

Param Type Description
font string The name of a defined font to use
string string The string to get the height of

fontBrite.getStringWidth(font, string) ⇒ number

Gets the width of the string for the given font (single lines only)

Kind: instance method of FontBrite
Returns: number - The width
Access: public

Param Type Description
font string The name of a defined font to use
string string The string to get the width of

fontBrite.renderLine(font, string, x, y) ⇒ number

Renders a single line of text in the given font

Kind: instance method of FontBrite
Returns: number - The bottom y-coordinate of the rendered line
Access: public

Param Type Description
font string The name of a defined font to use
string string The string to render
x number The x-coordinate of the top-left of the output
y number The y-coordinate of the top-left of the output

fontBrite.renderBlock(font, string, [x], [y], [w], [h], [lh]) ⇒ number

Renders a block (paragraph) of text in the given font

Kind: instance method of FontBrite
Returns: number - The bottom y-coordinate of the rendered line (may be different from y + h, due to font/line height)
Access: public

Param Type Default Description
font string The name of a defined font to use
string string The string to render
[x] number 0 The x-coordinate of the top-left of the block
[y] number 0 The y-coordinate of the top-left of the block
[w] number Remaining space in canvas The desired width of the block. Long lines will be wrapped on whitespace
[h] number Remaining space in canvas The desired height of the block. Long blocks will be truncated
[lh] number Height of each rendered line The desired line height of each line in the block

fontBrite.colorizeFont([name], font, h, [s], [l]) ⇒ string

Colorizes a font, replacing hot pink in any shade (r === b), with a desired color

Kind: instance method of FontBrite
Returns: string - The name of the defined font
Access: public

Param Type Default Description
[name] string "font__h_s_l" The stored name of the resulting font
font string The name of a defined font to use
h number The hue to colorzie the font to
[s] number 100 The saturation to use when colorizing the font
[l] number Source pixel luminosity The luminosity to use when colorizing the font

FontBrite.hslToRgb(h, s, l) ⇒ Object

Converts an HSL color to RGB

Kind: static method of FontBrite
Returns: Object - The output containing the RGB values for that color
Access: public

Param Type Description
h number The input hue (0-360)
s number The input saturation (0-100)
l number The input luminosity (0-100)

FontBrite.rgbToHsl(r, g, b) ⇒ Object

Converts an RGB color to HSL

Kind: static method of FontBrite
Returns: Object - The output containing the HSL values for that color
Access: public

Param Type Description
r number The input red component
g number The input green component
b number The input blue component

About

Javascript canvas bitmap font renderer, with color shifting

Resources

Readme
Activity

Stars

2 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages