Canvas Copy
3d Canvas copy fails in chrome after switching tabs
HTML
<canvas id="source"> </canvas>
<canvas id="destination"> </canvas>
<div>
<!--<button id="btnToggle">Toggle Visibility</button>-->
<button id="btnCopy">Copy Image</button>
<button id="btnClear">Clear Copy</button>
<button id="btnInit3d">Reinitialize 3d</button>
</button>
</div>
<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 uColor;
void main() {
gl_FragColor = uColor;
}
</script>
JavaScript
window.canvasSource = document.getElementById("source");
var canvasDestination = document.getElementById("destination");
var buttonCopy = document.getElementById("btnCopy");
//var btnToggle = document.getElementById("btnToggle");
var btnClear = document.getElementById("btnClear");
var btnInit3d = document.getElementById('btnInit3d');
var canvasOptions = {};
var bufferContext = canvasSource.cloneNode().getContext('2d');
//var sourceContext = canvasSource.getContext("2d", options);
var destinationContext = canvasDestination.getContext("2d", canvasOptions);
window.canvasSource.addEventListener("webglcontextlost", function(event) {
console.log('context lost');
event.preventDefault();
}, false);
window.canvasSource.addEventListener("webglcontextrestored", init3d, false);
btnCopy.addEventListener('click', function() {
var error = window.gl.getError();
if (error) {
console.log('Gl Error: ' + error);
}
destinationContext.drawImage(bufferContext.canvas,0,0);
});
btnClear.addEventListener('click', function() {
destinationContext.clearRect(0,0, 1500, 1500);
});
btnInit3d.addEventListener('click', function() {
init3d();
});
function init3d() {
console.log('init3d()');
window.gl = window.canvasSource.getContext("webgl", canvasOptions);
var gl = window.gl;
if (gl==null)
console.log("couldn't get webgl context");
else
console.log(gl);
gl.viewport(0, 0, window.canvasSource.width, window.canvasSource.height);
gl.clearColor(0, 0.5, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").firstChild.nodeValue;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
bufferContext.drawImage(canvasSource, 0,...