Cómo puedo hacer un lienzo que cumpla con la parte visible de la página. Todo lo que probé me dio un lienzo más grande con barras de desplazamiento, o significativamente más pequeño.
<!DOCTYPE html> <html> <body> <p></p> <canvas id="myCanvas" style="border:1px solid #000000;"> Your browser does not support the canvas element. </canvas> <script> canvasInit(); function canvasInit() { var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight]; var c = document.getElementById("myCanvas"); c.width = dimension[0]; c.height = dimension[1]; } </script> </body> </html>Creo que algo como esto debería funcionar:
c.width = window.innerWidth * 2; c.height = window.innerHeight * 2; c.style.width = `${window.innerWidth}px`; c.style.height = `${window.innerHeight}px`;Creo que puedes hacer esto.
establece el ancho de esta manera.
width = window. innerWidth; canvas. height = window. innerHeight;Incluso podrías cambiarlo en tu javascript
var canvasW = 640; var canvasH = 480;Aún mejor, puede poner esto en su función canvasinit().
canvas.width = document.body.clientWidth; //document.width is obsolete canvas.height = document.body.clientHeight; //document.height is obsolete canvasW = canvas.width; canvasH = canvas.height;