Responsive Canvas in Flexbox Container

Hi, i have a flexbox container, inside this flexbox container i have a canvas and a div, both the div and the canvas has flex:1; so they should take an equal width. but the canvas is a lot wider than the div, it also seems like the canvas has an aspect-ratio which cannot be removed or changed it any way. So how do it actually remove the aspect-ratio and make the canvas responsive? It seems like the only way to actually resize the canvas is to put fixed width and height, i obviously don't wanna do that because then the canvas is not responsive... I really don't have much experience using the canvas element since i put 100% focus on CSS, so i am not really interested in JS and other stuff, so this is a problem that i have never encountered before...

Codepen Example:
https://codepen.io/tok124/pen/RNbMyyJ
CodePenTim
...
Untitled
Was this page helpful?