Canvas tint color
HTML
<!--[if IE]>
<script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<canvas id="myDrawing" width="770" height="400">
<p>Your browser doesn't support canvas.</p>
</canvas>
JavaScript
var x; //drawing context
var width;
var height;
var fg;
var buffer
window.onload = function() {
var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas && drawingCanvas.getContext) {
// Initaliase a 2-dimensional drawing context
if (typeof window.G_vmlCanvasManager!="undefined") {
drawingCanvas=window.G_vmlCanvasManager.initElement(drawingCanvas);
var x = drawingCanvas.getContext('2d');
}else{
var x = drawingCanvas.getContext('2d');
};
// x = drawingCanvas.getContext('2d');
width = x.canvas.width;
height = x.canvas.height;
// grey box grid for transparency testing
x.fillStyle = '#666666';
x.fillRect(0,0,width,height);
x.fillStyle = '#AAAAAA';
var i,j;
for (i=0; i<100; i++){
for (j=0; j<100; j++){
if ((i+j)%2==0){
x.fillRect(20*i,20*j,20,20);
}
}
};
// create offscreen buffer,
buffer = document.createElement('canvas');
if (typeof window.G_vmlCanvasManager!="undefined") {
G_vmlCanvasManager.initElement(buffer);
var bx = buffer.getContext('2d');
...