画布元素溢出其容器 div

Question

I am trying to make a canvas element fit to its container div using Javascript rather than CSS, because this way it doesn't stretch anything drawn inside the canvas.

Currently, if I refresh the page, sometimes the canvas element fits perfectly inside. Other times, when I refresh, its width is greater than the container, and its height is lesser than the container. I have no idea why I get this different behavior upon refreshing the page, even without resizing the window.

Here's how I set up the canvas size:

const ctxX = canvasParent.offsetWidth - 4;
const ctxY = canvasParent.offsetHeight - 4;
canvasEl.width = ctxX;
canvasEl.height = ctxY;
const ctx = canvasEl.getContext("2d");

I read that setting size like this only works if the container is positioned relative, so this is the CSS for the container:

display: block;
position: relative;
height: 60%;
margin-top: 2%;
border: 2px solid v.$border;

Answer 1

The root cause is that offsetHeight and offsetWidth values are rounded and setting canvas dimensions to them will usually result in an inexact fit, either resulting in under or over-flow of width or height. I am not ruling out other causes due to calculations performed by layout engines, but this cause is crucial.

One solution is to use element.getBoundingClientRect to get the dimensions of the parent ( div ) element exactly, take the integers below height and width values and use them to set the dimensions of both the canvas and its parent element. This could result in the div element being up to 1px less than percentage value conversions to CSS pixel width and height, but that's inevitable given canvas dimension attributes take integer values.

Here's an example demonstrating this specific technique with warnings: changing canvas dimensions due to resize will destroy existing canvas content, and a resize handler would need to remove style settings for width and height on the canvas parent to find out what the resized dimensions would be.

Note: relative positioning is not required and not included below.

 "use strict"; let rect = canvasParent.getBoundingClientRect(); const ctxX = Math.floor(rect.width -4); const ctxY = Math.floor(rect.height -4); canvasEl.width = ctxX; canvasEl.height = ctxY; canvasParent.style.width = ctxX + 'px'; canvasParent.style.height = ctxY + 'px'; const ctx = canvasEl.getContext("2d");

 #canvasParent { height: 60%; margin-top: 2%; border: 2px solid orange; box-sizing: content-box; } canvas { background-color: forestgreen; }

 <div id="canvasParent"><canvas id="canvasEl"></canvas></div>