Scale canvas proportionally inside flexbox - css

Question

Suppose I have the following HTML:
<div>
<canvas class="colorPicker" width="800" height="800"></canvas>
<canvas class="colorPicker" width="800" height="800"></canvas>
</div>
And, this CSS:
div {
display: flex;
width: 100%;
overflow: hidden;
}
div > canvas{
flex-grow: 1;
flex-shrink: 1;
width: 50%;
}
The canvases are not scaled proportionally. They are taller than they are wide. This is visible when I paint circles on the canvas.
(JSFiddle: https://jsfiddle.net/08rckfek/)
Why is this happening?
If I don't use flexbox in the parent div, the canvases are scaled correctly.
Furthermore, it seems weird that I have to specify width: 50% at all. flex-shrink is ignored, even if I specify a basis.
How can I make a row of canvases that automatically scale proportionally based on the width of the parent flexbox?

Answer 1

You need to set align-items as by default its value is stretch
document.addEventListener('DOMContentLoaded', (e) => {
document.querySelectorAll('canvas.colorPicker').forEach((canvas) => {
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) / 2;
// Base white circle, so middle has a full color
ctx.beginPath();
ctx.arc(centerX, centerY, radius/2, 0, 2*Math.PI, false);
ctx.closePath();
ctx.fillStyle = '#fff';
ctx.fill();
for (let angle=0; angle<=360; angle+=1) {
const startAngle = (angle-2)*Math.PI/180;
const endAngle = angle * Math.PI/180;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
ctx.closePath();
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);
gradient.addColorStop(0, 'hsl(' + angle + ', 100%, 100%)');
gradient.addColorStop(0.5, 'hsl(' + angle + ', 100%, 50%)');
gradient.addColorStop(1, 'hsl(' + angle + ', 100%, 0%)');
ctx.fillStyle = gradient;
ctx.fill();
}
});
});
div {
display: flex;
width: 100%;
overflow: hidden;
align-items:flex-start;
}
div > canvas{
flex-grow: 1;
flex-shrink: 1;
width: 50%;
}
<div>
<canvas class="colorPicker" width="800" height="800"></canvas>
<canvas class="colorPicker" width="800" height="800"></canvas>
</div>