Problem in Canvas
Does anyone know why this problem happens? The size of the Canvas is 64x64, and the Tiles are 16x16.
41 Replies
we need a bit more information before we can help you: what is the expected behavior? what is the code?
Sure, no problem.
I removed a bit of code so it could be understood better.
As for the expected behavior, it is that the straight line is straight, it does not have that small slip
mm 🤔 no idea what could cause that. if you can make a minimal reproduction in the playground i can mess around with it too
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
Oh, but I'm not using solid to do that
ye doesn't matter
you can just grab a reference to a
canvas and then do the canvas stuff on it
just handy to have it in the playground, for quick sketching@bigmistqke here it is
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
i cannot seem to reproduce it
which browser are you using?
Google Chrome
windows/linux/mac?
Windows
Can I send you the code file and try it on your computer?
if you see it in the playground and i don't see it i don't think the code files will help
i m on mac
i don't think it's anything to do with your code
it's more a weird canvas-bug
i would check different (non-chrome) browser
firefox
p.ex
ok, i would check in Microsoft edge
that's also chrome
oh xd
🙂
they r everywhere
mb it's the fact that the canvas is
width="64" height="64"
some glitch with
you could check if you have the bug as well if you do not do width="64" height="64" and manually rescale those values to match the window's width/heightwhat do you mean 🤔
you use
width="64" height="64" in combination with image-rendering: pixelated; image-rendering: crisp-edges; to make a responsive grid
i think this might cause the pixel glitch
so i propose to make a variant where you don't rely on width="64" height="64" and image-rendering: pixelated; image-rendering: crisp-edges;
to check if you still have that bugI cannot remove the image-rendering since it is pixelart.
But if I remove the height and width, it would look like this, I don't see that error happening, maybe because it is very small, or because the error no longer happens. But the bad thing is that it would no longer be a 64x64, and the squares would be smaller and wouldn't look like a 16x16 in a 64x64
gotcha
weird bug!
Yes, I just asked stack overflow to see if anyone knows why it happens and how to solve it.
Either they insult me, or they help me. :yah:
I'll let you know if I solve it.
MDN Web Docs
CanvasRenderingContext2D: imageSmoothingEnabled property - Web APIs...
The imageSmoothingEnabled property of the
CanvasRenderingContext2D interface, part of the Canvas API, determines whether scaled images
are smoothed (true, default) or not (false). On getting the
imageSmoothingEnabled property, the last value it was set to is returned.
this could be of interest too
lol stackoverflow s so brutal
I asked 4 questions there and all 3 of them insulted me lmao, and in one they helped me
I tried it before 😔
Broo...
Not even 10 minutes have passed and they already gave me a dislike on stackoverflow 😭
being able to ask the right question is a skill
it can be hard in the beginning
i assume https://stackoverflow.com/questions/79256302/why-is-there-a-one-pixel-offset-in-my-canvas is your question
Stack Overflow
Why is there a one pixel offset in my canvas?
I was drawing some 16x16 images on my canvas.
I made the canvas size 64x64.
And I made it look bigger with CSS.
The reason why I enlarged it with CSS instead of modifying the size of the canvas. It...
yes
Any recommendations for modifying the post? They only made me upset, but they didn't tell me why.
ye, i kind of understand the downvote 😄 people have to do a lot of effort to be able to understand your problem
I just modified it, is it understandable a little better?
it's a lot of clutter
you should narrow the problem down to the essence and ask for this
Something like this?
I’m drawing 16x16 pixel images on a 64x64 canvas and using CSS to scale them. However, one corner of the image is misaligned by a pixel. Can someone help me figure out why this happens and how to fix it?
1. clearly formulate the bug
2. give the context (css with
image-rendering: pixelated and image-rendering: crisp-edges), which browsers does this happen? which os?
3. give a minimal reproduction so that people can try it out on their device.
it's a bit the same as what i asked here
+ code is always better then text
but also don't drop huge amount of code, try to make it as small as possible
minimal reproductions are really the keyI'm going to do that. thanks for the recommendation 👍
you are welcome!
good luck 🙂
Perfect, I already modified it, it has very little code and can be run to replicate the error, and I got straight to the point.
They closed the post though, so I'll have to wait a while until they review it. 👍
it's definitely an improvement 👍
https://stackoverflow.com/help/minimal-reproducible-example funny, this is pretty much what i was saying too
you could probably clean it up even more
I forgot to tell you, a chill guy responded to me, he said that scaling it with width and height sometimes causes fractional scaling, and that's why there are misaligned pixels. And it is solved simply by using "scale" in the transform. 😃
glad you figured it out!
so, you mean with doing
transform: scale(...) in the css?yep