8Observer8 Posted December 30, 2016 Share Posted December 30, 2016 Hello, Please, help me to set canvas on whole window, behind of all html elements It works fine: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="./libs/pixi.min.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; } #myCanvas { margin: 0; padding: 0; position: absolute; touch-action: none; width: 100%; height: 100%; border: 1px dashed; } </style> </head> <body> <canvas id="myCanvas" width="256" height="256"></canvas> <input type="button" value="button 1"> <input type="button" value="button 2"> <h1>Hello</h1> </body> </html> But it doesn't work how is above, because the dashed line doesn't cover whole window (doesn't include buttons) <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="./libs/pixi.min.js"></script> <style> html, body { margin: 0; padding: 0; overflow: hidden; } #myCanvas { margin: 0; padding: 0; position: absolute; touch-action: none; width: 100%; height: 100%; border: 1px dashed; } </style> </head> <body> <canvas id="myCanvas" width="256" height="256"></canvas> <input type="button" value="button 1"> <input type="button" value="button 2"> <h1>Hello</h1> <script> var myView = document.getElementById('myCanvas'); var renderer = PIXI.autoDetectRenderer( 256, 256, { antialias: false, transparent: true, view: myView }); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); renderer.render(stage); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
Théo Sabattié Posted December 30, 2016 Share Posted December 30, 2016 I am not sure but I think you wanted to write : <body> <input type="button" value="button 1"> <input type="button" value="button 2"> <h1>Hello</h1> <canvas id="myCanvas" width="256" height="256"></canvas> </body> Use this css: #myCanvas { margin: 0; padding: 0; position: fixed; touch-action: none; width: calc(100% - 2px); /* for borders */ height: calc(100% - 2px); /* for borders */ border: 1px dashed; top:0; left:0; } 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted December 31, 2016 Author Share Posted December 31, 2016 Thanks! This is a solution of first part of my question: #myCanvas { /*...*/ top: 0; left: 0; } The second part. I want to place <canvas> behind of all html elements. I want to place buttons over the canvas and I want to use canvas like background of my page. Now if I set for renderer the transparent to false I cannot see the buttons. Quote Link to comment Share on other sites More sharing options...
Théo Sabattié Posted January 1, 2017 Share Posted January 1, 2017 Ok'', you can add that: #myCanvas { /* ... */ z-index : -1; } 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted January 1, 2017 Author Share Posted January 1, 2017 Nice! Thank you much! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.