HTML and CSS Reference
In-Depth Information
Figure 17-4.
Your map with the 1,024 × 1,024 canvas tile boundaries overlaid on it
The result is a trade-off between memory and draw-call performance. Yes, you are churning up more memory
for the canvases (each canvas tile is approximately 4MB), but you reduce the draw call to 1-6 per frame (down from
approximately 400), which shows a great performance improvement.
Creating a CanvasTile
To perform offscreen canvas rendering requires use of an
offscreen canvas
. To help with this process, I have created
a new concept, which I'm calling canvasTile. This will represent a canvas object that you render into and use later.
In effect, a canvas tile will represent some subsection of the real estate of the map and allow you to prerender the
environment into its texture object for later use:
function CanvasTile(){
this.x=0; //world x,y, width and height of this tile
this.y=0;
this.w=100;
this.h=100;
this.cvsHdl=null; //a handle to the canvas to draw into
this.ctx=null; //the 2d context for said canvas
