Responsive Canvas causing blurry scaling

Question

I am creating a Canvas that I want to ensure it is easily navigated on any platform (desktop, mobile, etc). I decided on using a responsive canvas to accomplish this. Before I had the canvas at 800x800 and it looked fine (aside from not being responsive). The canvas includes lines and image files. I'm also using Bootstrap.

I took out the width/height definitions and began testing how it look when responsive. It did act responsive. However, everything looks enlarged and blurry, including the images and the lines. Even if I size down my screen. Part of the canvas is also off the screen.

I understand responsive means it'll scale. But why when the screen is even far below 800x800 it looks blurry, how can I correct that?

Relevant part of the index file:

...HTML above...
<div class="row">
  <div class="col-xs-1 col-sm-1" id="border">Menu</div>
  <div class="col-xs-11 col-sm-11" id="border">
  
<canvas id="Canvas"></canvas>
  </div>

</div>
<script src="js/script.js" charset="utf-8"></script>
<script>
<?php
 ...some PHP code here inserts images...
}
?>
</script>

The CSS is simply:

body{ background-color: ivory; }

#border{
  border: solid 1px black;
}

#Canvas{
  border: solid 1px red;  
  width: 100%;
}

Full script.js: https://pastebin.com/u63h6VZ8

I did review similar questions such as:

• HTML Blurry Canvas Images (inapplicable, is a non-responsive canvas and are just a static size)
• Canvas drawings, like lines, are blurry (inapplicable again, non-responsive)
• Canvas circle looks blurry (was only blurry on phone for user, mine is all devices)

[EDIT] The above blurry image is the full canvas. The second is the top left corner only of canvas before I made it responsive.

Answer 1

Imagine your canvas as an image ...they actually act the same. Imagine image 300px x 150px displayed to fit 100% of the container (screen)

• when container is bigger -> image will definetly blur when scaling up
• when container is smaller than image -> image will nicely scale down
• best result - image of the exact size of the container (1:1 pixel ratio)

Your canvas actually has no size given so the browser by default creates a canvas sized 300 x 150px - that is why your canvas is getting blured - because it is being scaled up; To change that size you can write at the beginning of your code smth like .:

// Init the canvas
var canvas=document.getElementById("Canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

and in your CSS changing canvas to fixed position like this:

#Canvas{
  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

...will give you the full-window-size canvas displayed with 1:1 pixel ratio. The working draft is here: https://jsfiddle.net/a2hefz0c/ (just re-run the code every time you change the size of the screen)

I have no idea what kind of responsivness you trying to reach - but this is the way to eliminate the blur and to take the whole area of the window. If you want to have canvas scaled-down and fitted into your container just leave your CSS as is and give your canvas hardcoded size like eg 1200x800px ...and this is what you're going to get: https://jsfiddle.net/6svk02ph/4/

The cropping of the content is also the result of the size of the canvas - when you draw something outside of the canvas (eg. 500px from left on a 300px canvas) it will not be on the canvas ;)