I'm having a problem with my spritesheet, I generate a map but when I zoom in on it I can observe these lines as in the image below:
When I used the tiles each in their separate image, that did not happen, how do I avoid this case?
I'm drawing like this, the problem happens when I give a "ctx.scale":
ctx.drawImage( imgSolos.img, (imgSolos.width * resultSolo), // resultSolo is current frame in the spritesheet 0, 32, 32, x, y, imgSolos.width, imgSolos.height );
Keep in mind that context.scale does not change the internal resolution of the canvas. It just adds a multiplication factor to all coordinates you pass to the drawing functions. Due to floating point inaccuracies on scale factors which are not factors of 2, those coordinates might no longer be pixel-perfect. The result is what you see in that screenshot.
Possible solutions are:
drawImagecalls. Only use integers.