For getting a solution to this problem, let us first understand the problem that Why do this problem take place.
The answer to this Question is the Pixels of the screen. The amount of blur often depends on the browser or the device you are using to view the Canvas. The Pixel ratios vary for different devices and so we get to see blurry effects.
Solution to the Problem:
We can solve this problem by using window.devicepixelratio property
The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel.
In simpler terms, this tells the browser how many of the screen’s actual pixels should be used to draw a single CSS pixel.
Let’s see an example of how our output looks without using devicePixelRatio:
Let’s now write some code to resolve this issue:
After including the window.devicePixelRatio let’s check the output for our code:
We have assumed both the conditions here, when we keep the window.devicePixelRatio=1 we get to see the blurry effect but when we keep the value as 2 we can see that we got cleartext. This is because a value of 1 indicates a classic 96 DPI (76 DPI on some platforms) display, while a value of 2 is expected for HiDPI/Retina displays.
- Nodejs | GM sharpen() Function
- How to change the font of HTML5 Canvas using a button in Angular.js?
- How to Draw Graphics using Canvas in HTML5 ?
- How to define marked/highlighted text using HTML5 ?
- How to define important text using HTML5 ?
- How to define subscripted text in HTML5?
- How to emphasize text in a document using HTML5 ?
- How to define superscripted text using HTML5 ?
- How to set smaller text using HTML5 ?
- How to define a part of text in an alternate voice or mood using HTML5 ?
- How to remove borders of a canvas-type text using Fabric.js ?
- How to rotate a text canvas using Fabric.js ?
- How to change font-family of a text canvas using Fabric.js ?
- How to Create Text on Canvas using Fabric.js ?
- How to Horizontally Flip a Text Canvas using Fabric.js ?
- How to change border-color of a canvas text using Fabric.js ?
- How to vertically flip a text canvas using Fabric.js ?
- How to change character spacing of text canvas using Fabric.js ?
- How to change the font style of a text canvas using Fabric.js ?
- How to change the font size of a text canvas using Fabric.js ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.