# Problem in Responsiveness of image in sliding puzzle

## Recommended Posts

See the picture as an example:

My problem is ,some image pieces are not exactly fit inside each individual tile.It feels like they are cut.

My calculations are-

Step1.

piece width=Math.floor(canvas width/cols);

piece height=Math.floor(canvas height/rows);

Step2:

Matrix width=piece width*cols

Matrix height=piece height*rows

Step3:

Then i push each individual piece (row /column) into array.

Step4.

Then i draw Image from (source to  destination)...

##### Share on other sites

Might be because you use Math.floor (which rounds down) to calculate the tile size.

Make sure your source image width/height are multiples of your tile width/height. (So that there is no rounding error).

(For example if the tile size 100x100 then the full image should be 300x300, or anything that can be divided by 100 without the need to round the result)

##### Share on other sites

Might be because you use Math.floor (which rounds down) to calculate the tile size.

Make sure your source image width/height are multiples of your tile width/height. (So that there is no rounding error).

(For example if the tile size 100x100 then the full image should be 300x300, or anything that can be divided by 100 without the need to round the result)

But my canvas is responsive so the tile size.How is your example possible?

##### Share on other sites

But my canvas is responsive so the tile size.How is your example possible?

Use round numbers as much as possible in your canvas element.

You should not scale the contents of the canvas element to fit the screen.

You should instead scale the canvas element, or its DOM ancestors, using CSS.

If you don't have access to CSS, then draw your canvas element onto the final canvas element with drawImage, and scale at that point.

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.