I am working on a Canvas project and I want to make sure it is easily navigated on any device, whether it's a desktop or mobile. To achieve this, I decided to make the canvas responsive. Originally, the canvas was set at 800x800 which looked fine but wasn't responsive. The canvas contains lines and image files, and I'm using Bootstrap in my project.
I removed the width/height definitions and started testing its responsiveness. While it did respond to different screen sizes, everything appeared enlarged and blurry, including the images and lines. Even when I reduced the screen size, parts of the canvas were off-screen.
I understand that being responsive means scaling, but why does it look blurry even when the screen is well below 800x800? How can I fix this issue?
Here is an excerpt from 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 code is as follows:
body{ background-color: ivory; }
#border{
border: solid 1px black;
}
#Canvas{
border: solid 1px red;
width: 100%;
}
Full script.js file can be found here.
You can view the images used in the canvas here: https://i.sstatic.net/wf758.png, https://i.sstatic.net/RyGwV.png.
I have researched similar questions like:
- HTML Blurry Canvas Images (not relevant as it's about non-responsive canvases with fixed sizes)
- Canvas drawings, like lines, are blurry (also not applicable as it's not related to responsiveness)
- Canvas circle looks blurry (this was specific to phones, whereas my issue is across all devices)
[EDIT] The first blurry image represents the entire canvas, while the second image shows only the top left corner before making it responsive.