Chaos Project

Game Development => General Discussion => Topic started by: Heretic86 on February 13, 2021, 01:13:57 pm

Title: Canvas Bug - How Do I Get Rid of This Seam When I Scale Graphics With drawImage?
Post by: Heretic86 on February 13, 2021, 01:13:57 pm
It drives me crazy when I keep having to put things down for months at a time and try to pick it back up again later and forget everything I had in my head while working on it...

Active page that is a Work In Progress where I am having my issue:
http://www.webucate.me/canvas/canvas.html

Now that I have a bit of time to play around with this again.  I am sure if you look you can pretty easily figure out what I am doing here.

Issues are related to the Scale.  When I set the Scale to 2:1 (or 200%) I am ending up with VERTICAL SEAMS between my Tiles.

What do I need to do to get rid of that SEAM when zoomed in?

All Javascript so you can simply Right Click and View Source.  I did split off the Scrollbars class in a separate file, but that seems to work ten shades of great (*proud*).

Im sure the bug is in function drawLayersToCanvas(), just confused because I am not using Floats and my coordinates are whole numbers...

Suggestions?
Title: Re: Canvas Bug - How Do I Get Rid of This Seam When I Scale Graphics With drawImage?
Post by: KK20 on February 13, 2021, 02:41:01 pm
I'd take a look at imageSmoothingEnabled. While you do have a couple lines disabling its usage, the tiles are still being smoothed out rather than using nearest-neighbor.
Title: Re: Canvas Bug - How Do I Get Rid of This Seam When I Scale Graphics With drawImage?
Post by: Heretic86 on February 13, 2021, 02:59:17 pm
Hmm, odd, but that did seem to fix it.

I guess when I changed the width and height, it also resets the imageSmoothingEnabled property?