DataURL with multiplier gets blurry while using pattern

[umangvyas]

Version

3.2.0

Test Case

https://jsfiddle.net/0w8zned1/

Steps to reproduce

• Create pattern as mentioned in the Fiddle.
• Set pattern as a background color of canvas.
• Fetch DataURL of canvas with multiplier > 1.
• Output gets blurry.

Expected Behavior

DataURL output needs to be perfect.

Actual Behavior

DataURL output gets blurry and the position of pattern image gets changed in dataurl image.

[asturur]

Cannot really understand what is blurry and how.
Can you describe point out the blurriness?

[umangvyas]

Hello @asturur, Thanks for your reply.

There are mainly two issues which I m facing with the background pattern.

1. DataURL of canvas with multiplier 0.5 is different compared to canvas pattern. Please see the attachment below. The position difference of pattern. U can also check with the fiddle here @ https://jsfiddle.net/0w8zned1/

2. DataURL of canvas with the multiplier > 1 looks blurry. Please find the attachment below.

You can see the quality difference.

Hope you got the issue.

[asturur]

so once you make the pattern wide 100px on a different canvas, and use that canvas to make a pattern, you get the details of an image made of 100px.

So answering the question 2, is the pattern size the same in the 800x1 canvas and in the 400x2?

For the question 1: the output that has a different offset seems a bug and needs to be fixed.

[umangvyas]

@asturur, Thanks for a quick reply.

Yes, The pattern size is the same for both the canvases.

For the 1st question,
I have added one pattern in one canvas and displayed its data URL and it seems blurry. I have added the same object in another canvas but its data URL is not blurry. See the fiddle: https://jsfiddle.net/6Lem2n7k/

For the 2nd question,
If I apply pattern any rectangle object then it's working fine. This issue occurs only when I apply the pattern on canvas.backgroundColor. So pattern offset issue occurs with the canvas background only.

[umangvyas]

Other than this, after applying the pattern to the background color if I change the canvas size runtime, Patterns on the canvas gets blurry.

I need to manually remove the older pattern before changing the size of the canvas and again I need to add a new pattern with the new size.

[umangvyas]

@asturur, Can you please get back on this? As its too critical issue for me and can't find any solution for this

[asturur]

I need to test some canvas toDataurl with multiplier with pattern as background color and inspect the offset.

That is the only bug i acknowledge so far.
The blurryness is something i have still to get a proof of.