I'm currently working on a basic modeling application for the web. The main component of my app is a canvas element that I'm trying to size correctly. However, when I set the height and width using CSS, it scales the entire canvas and compromises the quality. I attempted a different approach:
const canvas = $("#canvas");
const ctx = canvas[0].getContext("2d");
$(window).on("load", () => {
canvas.width = $(".board").width();
canvas.height = $(".board").height();
}).board {
height: 40rem;
width: 90rem;
background-color: white;
border: 1px solid black;
}
#canvas {
background-color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header-div">
<h1>Diagram Modeling Tool</h1>
</div>
<hr>
<div class="work-space">
<div class="toolbar">
<p>Components</p>
<hr class="components-line">
<div class="components">
<div class="component arrow">
<img class="arrow-image" src="images/arrow.png">
</div>
<div class="component rectangle">
<img class="rectangle-image" src="images/rectangle.png">
</div>
</div>
</div>
<div class="board">
<canvas id="canvas"></canvas>
</div>
</div>My goal is for the canvas to perfectly fit inside the div element it's placed in. Unfortunately, what I end up with looks like this:
https://i.sstatic.net/61C8s.png
Is there a way to adjust the size without distorting the canvas and losing its quality?