canvas.style('z-index', '-1'); doesn't work with noscrollbars.css and broke p5.easycam.js in chrome.
I'm trying to get rid of scrollbars on a full window canvas. this works really well in Firefox but breaks p5.easycam.js in chrome, I get no errors in console. maybe it has something to do with node.js?
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="noscrollbars.css">
<head>
<meta charset="UTF-8" />
<script src="p5.js"></script>
<script src="myscript.js"></script>
<script src="p5.easycam.min.js"></script>
</head> <body> <main> </main> </body>
</html>
noscrollbars.css
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
myscript.js (credit Paul Wheeler for pointing out question error)
var canvas;
var easycam;
let CamState = { distance: 2000, center: [0,0,0], rotation: [1,0,0,0]};
function setup() {
canvas = createCanvas(windowWidth, windowHeight, WEBGL);
canvas.position(0, 0);
canvas.style('z-index', '-1');
fill(255, 64, 0);
easycam = createEasyCam();
easycam.setViewport([0, 0, windowWidth, windowHeight]);
}
function draw() {
background(0);
ambientLight(100, 100, 100);
pointLight(255, 255, 255, -100, -100, 100);
directionalLight(100, 100, 100, -1, 0.1, 0.8);
box(150);
}
I did not know before posting but I'm guessing multiple canvas layers (in chrome) don't correspond to the css I wrote and I need to go learn more about that as canvas.style('z-index', '0'); works
I cannot reproduce your problem. Runnable example:
let easycam;
function setup() {
let c = createCanvas(windowWidth, windowHeight, WEBGL);
c.style('z-index', '-1');
noStroke();
fill(255, 64, 0);
easycam = createEasyCam();
easycam.setViewport([0, 0, windowWidth, windowHeight]);
}
function draw() {
background(0);
ambientLight(100, 100, 100);
pointLight(255, 255, 255, -100, -100, 100);
directionalLight(100, 100, 100, -1, 0.1, 0.8);
box(150);
}html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" href="test-link-before-head.css">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://freshfork.github.io/p5.EasyCam/p5.easycam.js"></script>
</head>
<body>
<main> </main>
</body>
</html>