How to resize canvas and its background image while somehow maintaining the co-ordinate scale? <p>I want my canvas and background image to scale to any browser size which I have learnt is possible through this.</p> <pre><code>&lt;canvas id="canvas" style="width:100%; height:100%; background-size:100% 100%; left:0px; top: 0px;"&gt; </code></pre> <p>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.</p> <p>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.</p> <p>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?</p> <p>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. </p> <p>I have gone through the various similar question on this site, but can't seem to figure it out.</p>