scarletsky / md-avatar

Material Design avatar for canvas!

md-avatar

Generate material design avatar with canvas!

install

bower install md-avatar

usage

new mdAvatar(options); // It will return a canvas dom element.

new mdAvatar({
	size: 100,
	text: 'S'
}); // <canvas width="100" height="100">

new mdAvatar({
	size: 64,
	text: 'G'
}).toDataURL(); // data:image/png;base64,.......

options

• target (default: null)

  The ID of target canvas, or you can pass a canvas dom. If this field not provide, it will return a new canvas element by document.createElement('canvas').

• size (default: 32)

  The size of avatar(canvas).

• text (default: ?)

  The text in avatar. You can pass a string in to this field, but it will only take the FIRST char.

• textColor (default: white)

  The color of text.

• textSize (default: this.size / 2)

  The size of text.

• textAlign (default: center)

• textBaseline (default: middle)

• fontFamily (default: sans-serif)

• bgColor (default: depend on this.text)

  The avatar's background color. By default, it contains color patterns(500) in Material Design Color. And the color's default value is depend on this.text(not random).

LICENSE

MIT