Canvas-based Letter Avatar Plugin For jQuery - LetterPic

File Size: 259 KB
Views Total: 3542
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Canvas-based Letter Avatar Plugin For jQuery - LetterPic

Just another jQuery text avatar plugin which converts usernames into canvas based avatar pictures like Google does in several web apps. The generated avatar will be a picture which can be downloaded as a png file.

How to use it:

1. Import jQuery library and the jQuery LetterPic plugin's script into your html page.

<script src="//"></script>
<script src="js/jquery.letterpic.min.js"></script>

2. Create an HTML5 canvas element in which you want to generate the text avatar.

<canvas class="demo" title="User Name" data-userid="1"></canvas>

3. Just initialize the plugin on the canvas element and done.


4. Customize the generated avatar:


  // an array of colors
  colors: [],

  // an array of gradients
  gradients: []

  // font family
  font: 'Arial',

  // 'color', 'images' or 'gradients'
  fill: 'color'

  // color of image overlay
  imageOverlayColor: rgba(0, 0, 0, 0)

  // font color            
  fontColor: '#fff',

  // font size
  fontSize: .45

Change log:


  • Fixed issue, when there are more elements than predifened bg's


  • Misprint in self var declaration fixed


  • Some refactoring. New settings.


  • Image loading error handling fix


  • Gradient and image background options

This awesome jQuery plugin is developed by yakovlevga. For more Advanced Usages, please check the demo page or visit the official website.