Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question 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:

    Code:
    <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?

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    29
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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...

  • Users who have thanked ereignis for this post:

    nomaeswonk (07-14-2011)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •