canvas template (full screen)

canvas-template-full-screen.markdown

canvas template (full screen)

A Pen by Landgreen on CodePen.

License.

index.html

<!-- 
for the non full screen version
https://codepen.io/lilgreenland/pen/zKVXxo -->

<canvas id="canvas-full"></canvas>

script.js

var canvas = document.getElementById('canvas-full');
var ctx = canvas.getContext("2d");

function setupCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

setupCanvas();
window.onresize = function() {
  setupCanvas();
};







//___________________get mouse input___________________
/* var mouse = {
  down: false,
  x: 0,
  y: 0
};
document.onmousemove = function(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}
document.onmousedown = function() {
  mouse.down = true;
  console.log(mouse);
};
document.onmouseup = function() {
  mouse.down = false;
}; */




//___________________get keyboard input___________________
// var keys = [];
// document.onkeydown = function(e){
//   keys[e.keyCode] = true;
//   //console.log(e.keyCode);
// }
// document.onkeyup = function(e){
//   keys[e.keyCode] = false;
// }

// const cycle = function() {
//   ctx.clearRect(0, 0, canvas.width, canvas.height); //clear

//   window.requestAnimationFrame(cycle);
// };
// window.requestAnimationFrame(cycle);

style.css

body{
  overflow:hidden;

}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}