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
23 Replies
I solved the issue myself 🙂
Here is a working example so if anyone ever come across the same issue, you can see here how i managed to solve it 🙂
https://codepen.io/tok124/pen/jENzRJO
i dont think you need the position absolute
also, are you sure you want a responsive canvas?
from my experience, the contents should clear when it is resized
I was able to do it without a parent div
https://codepen.io/tok124/pen/PwYePQp
The canvas is just going to be filled with a random backgorund color, nothing else
It was for a game i wanted to make
https://codepen.io/tok124/pen/bNbvJqQ
So you should guess the correct hue, saturation, lightness values, i use a canvas so you cannot cheat by inspecting element in devtools.
and you wanted to keep it from being cheated?
well, i have something for you
instead of just filling it with the color, why dont you use a pixel that's 0.01 more transparent?
like 1 opacity and 0.999 opacity
this way, you have a grid of pixels that will look like a single color
and cheating wont help
Even if you have opacity, you can still inspect the color in devtools if you just use a regular div. All CSS can be viewed in devtools. So you would need to add a background without using CSS, therefore i used a canvas so i don't add a background using CSS so that there is no way to figure out the color from the devtools. I mean sure... You can still use devtools to figure out the color since the devtools has an eyedropper tool. You can also use extensions to grab the color. no way to make it 100% cheat proof, but using a canvas was the best way that i could possibly find to prevent cheat or at least make it more difficult for anyone who would want to cheat xD
no no, on the canvas
instead of you filling it with the color, render a checkerboard pattern of correct and incorrect color
0.999 opacity should be 245 opacity
Aaahh yeah i see what you mean
Yeah i could probably do that
make sure that sometimes you make the lighter or the darker pixel the correct color, so there isnt a pattern
Yeah
50/50 is pretty much the same as guessing, so, extracting the colors is useless
Yupp true 😄
Thanks for the advice ! 🙂
you're welcome
i bet you forgot about this, when implementing your thingy
if you want to be really mean, you can randomize the colors, so there isnt a pattern
That’s a lot of effort to make sure there’s no cheating , for a game where you don’t win anything. If they cheat they’re just cheating themselves ? Not you ?
lots of games don't have a winning criteria and no end goal, but are still fun
I didn’t say they aren’t fun- I’m saying I wouldn’t worry too much about cheaters as there is no incentive to cheat. You’re proving my point, it’s for fun so they are just cheating themselves out of fun
i know what you mean, but just because it is a fun app doesn't mean there won't be some cheating
and also, it isn't hard to do what i said
But who cares if they cheat
It’s not as though it’s gonna affect the creator of the game or anyone other than the cheater . Most people would use an eyedropper from a browser extension anyway rather than know to go into dev tools
who cares about a cheater not being able to cheat and be stuck trying to guess it?
it makes it even more fun
and then you can laugh at the poor cheater playing coin tossing and guessing, like the rest of us
but seriously, it's something just for fun
if it has or not has cheating propection, who cares?
but if it has some, why not go all the way and make it hell to cheat, with minimal work?
Actually, you do win something, you win experience in working with HSL colors because HSL is awesome. by learning how it works, you don't really need to rely on color pickers. So i will use this game to train people to use HSL 🙂
And yeah, oklch is probably a much better color, but i rather use HSL because it is so easy to use, the chroma value on oklch is kinda complicated honestly ^^
This is my point , if they are cheating they are only cheating themselves because the prize is the experience.