jQuery to display ANSI graphics

This is my first attempt at a jQuery plugin. Any tips or comments in regards the the plugin setup would be appreciated. I'm also looking for a general review over the code itself. I'm wondering if there is a better way to encode the font. The way I'm doing it now makes it easy to see, read and create the characters, but it's bulky.

One item to note it the font is not yet complete, but most screens/animations have what they need. I should have the font finished out in the next few days.

You can see a working ANSI animated screen here. There is a known issue with IE that prevents this from working. I know the fix, but just haven't gotten doing it yet.

The full font is not listed here as it's too large to post. A full listing is here. Only the majority of the font has been removed from the listing below.

```
(function ($) {
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this);
$this.addClass('ansiScreen');
var data = $this.data('ansi');
if (!data) {
data = new Object();
data.target = $this;
data.fontheight = 16;
data.fontwidth = 8;
data.canvas = $('');
$this.append(data.canvas);
data.ctx = data.canvas[0].getContext('2d');
data.processInterval = null;
data.ansi = null;
data.ansiCode = null;
data.ansiPos = 0;
data.fgcolor = 'rgb(255, 255, 255)';
data.bgcolor = 'rgb(0, 0, 0)';
data.bold = false;
data.blink = false;
data.pos = [0, 0];
data.savepos = [0, 0];
data.screen = Array();
data.last = 0;
for (var i = 0; i data.ansi.length)
{

You could use a bit more concise syntax. For example, when filling the data object in ìnit(), you could use literal object notation:

data = {
  target: $this,
  fontheight: 16,
  fontwidth: 8,
  canvas: $(''),
   // etc.
}

Or use jQuery.extend(), to add or overwrite properties.

You don't need to reassign the data object ($this.data('ansi', data);) after changing the the properties of data, because it's a reference and all changes have been applied to the object "inside jQuery" already. Example:

var $example = jQuery("body");
var data = {}; // Empty object
$example.data("ansi", data); // Assign data
var data = $example.data("ansi"); // get reference
data.test = "hello";
alert($example.data("ansi").test); // Shows 'hello'. No need to call $example.data("ansi", data); before

In destroy() you call data.tooltip.remove();, but I can't seem to see data.tooltip` ever being set.

You have some duplicate code, that could be refactored into a separate function, such as parsing the integers from the escape sequences.

You should consider moving the actual "business code" parts into separate functions.

The colors should be kept in an array/object instead of assigning them.

(More maybe later.)

StackExchange Code Review Q#2719, answer score: 3