0

On selecting the canvas width and height using window.innerWidth and window.innerHeight should set the canvas width and height to fit the screen that is exclusive of toolbars and everything, but somehow it exceeds the html height and width.

<style>
    body, html {
        margin: 0;
        padding: 0;
    }


</style>    

<body>
<canvas id="myCanvas"></canvas>
<script>
    var myCanvas = document.getElementById("myCanvas");
    var c = myCanvas.getContext("2d");
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    myCanvas.style.backgroundColor = "#000000";
</script>
</body>

how do i fix this?? I have seen other samples and they do exactly the same but that's not working in my code.

ankitjt
  • 149
  • 1
  • 1
  • 12

1 Answers1

1

I have had this issue, and it is because the canvas is an inline element.

To make it so it isn't an inline element turn it into a block element like so:

canvas {
    display: block;
}
Get Off My Lawn
  • 27,770
  • 29
  • 134
  • 260
  • 1
    It worked, I thought there was some issue with the innerWidth or innerHeight not fetching the numbers right, thanks a lot for fixing my lawn :P – ankitjt Aug 30 '17 at 05:10