0

I want my canvas and background image to scale to any browser size which I have learnt is possible through this.

<canvas id="canvas" style="width:100%; height:100%;
background-size:100% 100%; left:0px; top: 0px;">

Setting the width and height using percentages causes whatever I draw on top to come out blurred. The reason for this I read is that it comes out blurry because the width and height of canvas set using css is different.

It is absolutely imperative that I keep track of the co-ordinates since I have written a collision detection logic using the original size of the image.

Is it possible to dynamically change the canvas size to fill the screen, redraw it and ensure that the collision logic works perfectly without blurry drawing on top?

Lets take an example here. The image floor.jpg that I want as the background of the canvas is 1200X700. I want the canvas to be 100% of the page width and height. My animated player that moves on top of it requires collision detection with walls which I have coded keeping in mind the 1200x700 image.

I have gone through the various similar question on this site, but can't seem to figure it out.

Hasmit Uchil
  • 1
  • 1
  • Possible duplicate of [How put percentage width into html canvas (no css)](http://stackoverflow.com/questions/18679414/how-put-percentage-width-into-html-canvas-no-css) – Kaiido Jan 16 '16 at 16:22
  • As mentioned, I have used exact co-ordinates for collision detection and also this causes blurring of images drawn on top. – Hasmit Uchil Jan 16 '16 at 16:26
  • Rewrite your code so that you use the actual size of the canvas rather than some arbitrary size. Or use a very large size as the arbitrary size of the canvas, so that it's scaled down, not up. It'll probably still be somewhat blurry, but it should look better than scaled up. – jcaron Jan 16 '16 at 16:56
  • I'm sorry but I failed to understand.I've edited the question to include an example.Could you please be kind enough to answer with respect to it? – Hasmit Uchil Jan 16 '16 at 17:05
  • The phrase you're looking for is "aspect ratio". Here is a previous Stackoverflow Q&A showing how to [resize content](http://stackoverflow.com/questions/26209169/what-css-can-i-use-that-will-scale-the-canvas-to-fill-its-container-without-chan/26210395#26210395) to fill the size of a container. You can use this answer to resize your `canvas.width` & `canvas.height` so that your background remains proportionally sized to its original -- and proportional resizing eliminates most of your blurriness. – markE Jan 16 '16 at 21:55

0 Answers0