Stackoverflow HTML5 examples Animation and Responsive full screen canvas
This is an example of code from the stackoverflow HTML5-canvas Documentation See code for more info.
JavaScript
/* This contains two examples from stackoverflow documents. */
var exampleRunning = false;
/* From stackoverflow documents
html5-canvas
Introduction to html5-canvas
Creating a responsive full page canvas
http://stackoverflow.com/documentation/html5-canvas/1892/introduction-to-html5-canvas/7516/creating-a-responsive-full-page-canvas#t=20160809212935818717
*/
var canvas;
var ctx;
function createCanvas(){ // creates a canvas
var canvas = document.createElement("canvas");
canvas.style.position = "absolute"; // set the style
canvas.style.left = "0px"; // position in top left
canvas.style.top = "0px";
canvas.style.zIndex = 1;
document.body.appendChild(canvas); // add to document
return canvas;
}
function sizeCanvas(){ // resizes canvas. Will create a canvas if it does not exist
if(canvas === undefined){ // if there is no canvas create it
canvas = createCanvas();
ctx = canvas.getContext("2d"); // get the 2D context
}
canvas.width = window.innerWidth; // set the resolution to fill the page
canvas.height = window.innerHeight;
if(exampleRunning){
reset(); // reset anmation
}
}
// removes the canvas
function removeCanvas(){
if(canvas !== undefined){ // make sure there is something to remove
window.removeEventListener("resize",sizeCanvas); // remove resize event
document.body.removeChild(canvas); // remove the canvas from the DOM
ctx = undefined; // dereference the context
canvas = undefined; // dereference the canvas
}
}
// the resize listener
window.addEventListener("resize", sizeCanvas);
// call sizeCanvas to create and set the canvas resolution
sizeCanvas();
/* End of stackoverflow example Creating a responsive full page canvas*/
/* From stackoverflow documents
html5-canvas
Introduction to...