Fullbrowser canvas element w/o scrollbars

I'm playing around with full browser canvas element it seems to spill beyond the browser bounds generating horizontal and vertical scrollbars.

This is the technique I'm using:


<canvas id="c" width="1" height="1"></canvas>
<script type="text/javascript">
var ce = document.getElementById("c");
var cc = ce.getContext("2d");

function draw() {
var ctx = (cc);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, ctx.canvas.width, 100);
}
draw();

$(window).resize($.debounce(100, function() {
draw();
}));
</script>


I've also tried to wrap the canvas element inside a div and set that div's overflow equal to hidden, but the results are unchanged.

Does anyone have any insight on this?

html, body {width:100%;height:100%;overflow:hidden;}
c {width:100%;height:100%;display:block;}

or you could use innerheight & innerwidth and resize on window resize to guarantee the window is always full...

Yea, I originally had the overflow:hidden on the html & body elements but I wanted to see if there was another way.

I'll try out the innerwidth/innerheight and see how that goes.

Thank you for the reply, ereignis!