Playing with the HTML5 Canvas and JQuery – Scrollbar Issues?

Post to Twitter

I’ve been working with the HTML5 Canvas element a fair bit trying to get use to how it works, what works and what doesn’t. Something I’ve been tinkering with is how to get the Canvas to make use of the entire browser (available) screen whether it’s on a mobile device or a desktop/laptop and to ensure that if it’s on a mobile device that when the user flips the device from portrait to landscape that the canvas adapts to the change in the screen’s width and height properties.

Something I found out early on is if you change the width and height of the canvas element then it will scale the content, even if you do a redraw. I didn’t care for the scaling effect so in my code (which you can see below and can view online at this location) so I instead drop the current canvas and create a new one at the new size. Since I have to redraw anyway the only real expense is adding back a dynamically created canvas.

Note: So far I only tested this code in Chrome and Android.

<html>
	<head>
		<title>Canvas Sizing</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				
				var canvasContext;
				resizeCanvas();
				$(window).resize(function() { resizeCanvas() });
				
				function resizeCanvas()
				{
					var w = window.innerWidth - 40;
					var h = window.innerHeight - 40;				
					var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';				

					$('#contentholder').empty();
					$(canvasString).appendTo('#contentholder');
					canvasContext = $('#mainCanvas').get(0).getContext('2d');				
					
					drawOnCanvas();
				}

				function drawOnCanvas()
				{
					var x = 15;
					var y = 35;

					canvasContext.font = "30pt serif";
					canvasContext.fillStyle="#0f0";
					canvasContext.fillText("Hello World!", x, y);
				}
			});
		    </script>
    <style>
      #mainCanvas
      {
        background-color: #000;
        border: solid 3px #0F0;
      }
      body
      {
        background: #000;
      }
	  #contentholder
	  {
		width: 99%;
		height: 99%;
		margin: auto;
	  }
     </style		
	</head>
	
	<body>
		<div id="contentholder"></div>
	</body>
</html>

The part that is strange is I need to roughly chop off 40 pixels from the width and height or I’ve found Chrome (on my laptop) will add in scrollbars. I’ve also seen other people have this same issue. When I render the page in an Android browser (Droid X) it throws in some whitespace which doesn’t look to great when I rotate into landscape mode.

I’d be curious to know if anyone (CSS guru?) has found a way for this not to happen. It seems like there are quirky ways to go about this but it would be nice to have something clean that works consistently.

Update Feb. 13, 2011: I had a friend send me this screenshot of his iPhone running this code. The “Hello World” words are actually outside of the area where the canvas should be viewable. This happens when he turns the iPhone from portrait mode to landscape.

Update Feb. 14, 2011: Some more feedback I’ve gotten is this happens on Mobile Safari 3.1.3 but not on newer versions like 4.2.1. So it indeed does look to be an issue with earlier versions of Mobile Safari.

Post to Twitter

This entry was posted in HTML5, JavaScript. Bookmark the permalink.

One Response to Playing with the HTML5 Canvas and JQuery – Scrollbar Issues?

  1. Pingback: Using the Google Web Toolkit (GWT) to create an HTML5 Canvas that uses (almost) all available space | Giant Flying Saucer

Comments are closed.