Big Data UTF-8 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>
<button onclick="myFunction()">Click me</button>

JavaScript

var createData = function( dataArray ) {
	var npoints = 10000;
  for (var i = 0, l = npoints; i < l; i++) {
      dataArray.push({ x: Math.random() * 500, y: Math.random() * 500});
  };
  return dataArray;
};

myFunction = function() {
	console.log( 'woo' );
}

var dataObjArray = createData([]);

// 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');


// 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);

var t0 = performance.now();
for (var i = 0; i < dataObjArray.length; i++) {
	var dataObj = dataObjArray[i];
	context.drawImage( tempCanvasJS, dataObj.x, dataObj.y, 15, 15 );
}
var t1 = performance.now();
console.log("Initial render took " + (t1 - t0) + " milliseconds.");

// 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( tempCanvasJS, 40, 200-15, 15, 15 );