From 2be165fa70f95993fecc2e94c009007c30a85473 Mon Sep 17 00:00:00 2001
From: thatcher <thatcher.christopher@gmail.com>
Date: Fri, 1 Mar 2013 08:14:35 -0500
Subject: [PATCH] niave implementation of prerender for canvas, the first
 optimization discussed here:
 http://www.html5rocks.com/en/tutorials/canvas/performance/

---
 src/drawer.js |  2 ++
 src/tile.js   | 42 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index 2fe5c4ba..102085f9 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -1153,6 +1153,7 @@ function drawTiles( drawer, lastDrawn ){
 function drawDebugInfo( drawer, tile, count, i ){
 
     if ( USE_CANVAS ) {
+        drawer.context.save();
         drawer.context.lineWidth = 2;
         drawer.context.font = 'small-caps bold 13px ariel';
         drawer.context.strokeStyle = drawer.debugGridColor;
@@ -1205,6 +1206,7 @@ function drawDebugInfo( drawer, tile, count, i ){
             tile.position.x + 10, 
             tile.position.y + 70
         );
+        drawer.context.restore();
     }
 }
 
diff --git a/src/tile.js b/src/tile.js
index 4624ff01..8add9ede 100644
--- a/src/tile.js
+++ b/src/tile.js
@@ -1,5 +1,7 @@
 (function( $ ){
-    
+    var TILE_CACHE       = {},
+        TILE_CACHE_STACK = [],
+        TILE_CACHE_MAX   = 256;
 /**
  * @class
  * @param {Number} level The zoom level this tile belongs to.
@@ -140,7 +142,9 @@ $.Tile.prototype = {
     drawCanvas: function( context ) {
 
         var position = this.position,
-            size     = this.size;
+            size     = this.size,
+            rendered,
+            canvas;
 
         if ( !this.loaded || !this.image ) {
             $.console.warn(
@@ -151,9 +155,9 @@ $.Tile.prototype = {
         }
         context.globalAlpha = this.opacity;
 
-        context.save();
+        //context.save();
 
-        //if we are supposed to b rendering fully opaque rectangle,
+        //if we are supposed to be rendering fully opaque rectangle,
         //ie its done fading or fading is turned off, and if we are drawing
         //an image with an alpha channel, then the only way
         //to avoid seeing the tile underneath is to clear the rectangle
@@ -168,10 +172,32 @@ $.Tile.prototype = {
             );
 
         }
-        
-        context.drawImage( this.image, position.x, position.y, size.x, size.y );
 
-        context.restore();
+        if( !TILE_CACHE[ this.image.src ] ){
+            canvas = document.createElement( 'canvas' );
+            canvas.width = this.image.width;
+            canvas.height = this.image.height;
+            rendered = canvas.getContext('2d');
+            rendered.drawImage( this.image, 0, 0 );
+            TILE_CACHE[ this.image.src ] = rendered;
+        }
+
+        rendered = TILE_CACHE[ this.image.src ];
+        //rendered.save();
+        context.drawImage( 
+            rendered.canvas, 
+            0,
+            0, 
+            rendered.canvas.width, 
+            rendered.canvas.height, 
+            position.x, 
+            position.y, 
+            size.x, 
+            size.y 
+        );
+        //rendered.restore();
+
+        //context.restore();
     },
 
     /**
@@ -183,7 +209,7 @@ $.Tile.prototype = {
             this.element.parentNode.removeChild( this.element );
         }
 
-        this.element    = null;
+        this.element = null;
         this.image   = null;
         this.loaded  = false;
         this.loading = false;