ccabd Comments - Answer Overflow

i faintly remember something about some elements in some circumstances needing an explicit width set, but for the love of god i can't remember any specifics

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

anyways, i removed the wrapper and added min-width, thanks for helping out 🙂

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

for now it does. first time really diving into canvas so i'll probably make a lot of mistakes along the way, but that's the fun part, isnt it

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

function resizeCanvas() {
    const height = canvas.clientHeight;
    const width = canvas.clientWidth;

    if ( canvas.height !== height || canvas.width !== width ) {
        canvas.height = height;
        canvas.width = width;
    }
}

function resizeCanvas() {
    const height = canvas.clientHeight;
    const width = canvas.clientWidth;

    if ( canvas.height !== height || canvas.width !== width ) {
        canvas.height = height;
        canvas.width = width;
    }
}

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

i'm playing around with creating a minigame, so as part of my render loop i resize the canvas like this

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

min-width: 0 works as well

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

huh, indeed

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

i guess its an acceptable workaround, but im still curious so if you happen to have an idea, lmk 🙂

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

first time in years i have to actually wrap an element for it to behave

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

yeah that what i was thinking too, but object-fit: none didn't have any effect either

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

thank you 😄

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

with same css, behaves differently, thats what is confusing to me

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

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

<aside id="config">
    <button id="regenerate">regenerate</button>
</aside>

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

<aside id="config">
    <button id="regenerate">regenerate</button>
</aside>

instead of

<canvas id="canvas"></canvas>

<aside id="config">
    <button id="regenerate">regenerate</button>
</aside>

<canvas id="canvas"></canvas>

<aside id="config">
    <button id="regenerate">regenerate</button>
</aside>

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

not in between

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

try it out for yourself in the pen, just change canvas to div

38 replies

KPCKevin Powell - Community

•Created by ccabd on 11/29/2023 in #front-end

Canvas in flexbox not resizing properly

but why does it behave differently when i replace the canvas with a div ?

38 replies

Gaming

Programming