How can I resize the canvas element in html without zooming it and losing quality?

Question

I am developing a basic modeling app on web. I have a board as a canvas element. I am trying to set its size. When I set its height and width in css, it scales the entire canvas and that loses quality. I tried to do it like this instead:

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>

I want it to completely cover the size of the div element it is in. Instead, what I get is this:

How can I set the size without scaling the canvas and losing quality?

Answer 1

As you are using jQuery, you might want to read the following answer: jQuery equivalent of getting the context of a Canvas

I added [0] to canvas[0].width and canvas[0].height to your jQuery code and then added some drawing calls to show that nothing is being zoomed.

const canvas = $("#canvas");
const ctx = canvas[0].getContext("2d");

$(window).on("load", () => {
  canvas[0].width = $(".board").width();
  canvas[0].height = $(".board").height();
  ctx.fillRect(50, 50, 50, 50);
  ctx.fillRect(350, 50, 50, 50);
  ctx.fillRect(350, 350, 50, 50);
  ctx.fillRect(50, 350, 50, 50);
})

.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="work-space">
  <div class="board">
    <canvas id="canvas"></canvas>
  </div>
</div>