UTF-8 Symbols on HIDDEN Canvas

by brian428

HTML

<h4>
Repeated drawing of the same symbol multiple times on a Canvas is much faster when using<br/>
a hidden Canvas once for each symbol, then using drawImage() to render it onto the visible Canvas.
</h4>
<div style="border: 2px solid black; width:500px;">
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>
<canvas id="tempCanvas" width="15px" height="15px" style="display:none; border: 2px solid black"></canvas>

JavaScript

// COLORS
var colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];


// http://www.w3schools.com/charsets/ref_utf_geometric.asp
// SYMBOLS
var filledSquare = "\u25A0";
var filledRightTriangle = "\u25B6";
var openRightTriangle = "\u25B7";
var squareSlash = "\u25A7"
var filledDimond = "\u25C6";
var openDimond = "\u25C7";


// VISIBLE Canvas.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');


// HARDCODED hidden Canvas. We don't want this though.
var tempCanvas = document.getElementById('tempCanvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.font = "16px Monospace";
tempContext.fillStyle = colorList[1];
tempContext.fillText( squareSlash, 0, 15);

// Copy drawing from hidden Canvas onto visible canvas
// Must subtract height of hidden canvas to position correctly,
// since font is written from bottom up, but image is drawn top down.
// Might even be better to try and use 1/2 w and 1/2 h, to better center the symbol?
context.drawImage( tempCanvas, 20, 100-15 ); 
context.drawImage( tempCanvas, 222, 100-15 );
context.drawImage( tempCanvas, 227, 105-15 );


// DYNAMICALLY create a hidden Canvas and use that to copy the symbol onto the visible Canvas!
var tempCanvasJS = document.createElement('canvas');
tempCanvasJS.style.display = "none";
tempCanvasJS.width = 15;
tempCanvasJS.height = 15;
var tempCanvasJSContext = tempCanvasJS.getContext('2d');

// Copy drawing from hidden Canvas onto visible canvas
tempCanvasJSContext.font = "16px Monospace";
tempCanvasJSContext.fillStyle = colorList[10];
tempCanvasJSContext.fillText( openDimond, 0, 15);

// Add from the dynamically created hidden canvas! Wheeeee!!!
// context.drawImage(img,x,y,width,height);
// Apparently it is faster to specify width and height
context.drawImage(...