Problem in Responsiveness of image in sliding puzzle

[Teena]

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)...

 

Waiting for your response!

 

 

[jpdev]

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)

[Teena]

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?

[agamemnus]

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.