Responsive Canvas causing blurry scaling

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.

from Responsive Canvas causing blurry scaling