fixed issue #147

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-datagrid",
   "main": "lib/main.js",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "ignore": [
     "**/.*",
     "node_modules",

build.txt

@@ -1 +1 @@
-2010
+2015

lib/draw.js

@@ -4,6 +4,7 @@ define([], function () {
     'use strict';
     return function (self) {
         var perfCounters = [],
+            cachedImagesDrawn = false,
             drawCount = 0,
             perfWindowSize = 300,
             entityCount = [],
@@ -50,29 +51,33 @@ define([], function () {
                     loaded = false;
                 }
             });
-            if (loaded) {
+            if (loaded && !cachedImagesDrawn) {
+                cachedImagesDrawn = true;
                 self.draw();
             }
         }
         function drawHtml(cell) {
             var img,
                 v = cell.innerHTML || cell.formattedValue,
+                cacheKey = v.toString() + cell.rowIndex.toString() + cell.columnIndex.toString(), 
                 x = cell.x + self.canvasOffsetLeft,
                 y = cell.y + self.canvasOffsetTop;
-            if (self.htmlImageCache[v]) {
-                img = self.htmlImageCache[v];
+            if (self.htmlImageCache[cacheKey]) {
+                img = self.htmlImageCache[cacheKey];
                 if (img.height !== cell.height || img.width !== cell.width) {
                     // height and width of the cell has changed, invalidate cache
-                    self.htmlImageCache[v] = undefined;
+                    self.htmlImageCache[cacheKey] = undefined;
                 } else {
                     if (!img.complete) {
                         return;
                     }
                     return self.ctx.drawImage(img, x, y);
                 }
+            } else {
+                cachedImagesDrawn = false;
             }
             img = new Image(cell.width, cell.height);
-            self.htmlImageCache[v] = img;
+            self.htmlImageCache[cacheKey] = img;
             img.onload = function () {
                 self.ctx.drawImage(img, x, y);
                 drawOnAllImagesLoaded();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "Canvas based data grid web component.  Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.",
   "main": "./dist/canvas-datagrid.js",
   "scripts": {

tutorials/developer.js

@@ -45,6 +45,9 @@ function g() {
         return data;
     }
     grid.data = getData('');
+    grid.addEventListener('beforerendercell', function (e) {
+        e.cell.innerHTML = e.cell.value;
+    });
     // for (x = 0; x < 40; x += 1) {
     //     // grid.schema[x].width = 500 * Math.random();
     //     // grid.schema[x].hidden = Math.random() > 0.5;