Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is called anti-aliasing and is a result of interpolating the image when re-sized (or sub-pixeling shapes, text and so forth). It's something the browser do internally.</p> <p>You can however turn off this in more recent version of the browser.</p> <p>Here is a test I made to see if this works in your browser and the difference between the modes (as in the picture below) - the bottom version should not be smoothed:</p> <p><kbd><strong><a href="http://jsfiddle.net/AbdiasSoftware/TYUUJ/" rel="nofollow noreferrer">ONLINE TEST</a></strong></kbd></p> <p><img src="https://i.stack.imgur.com/imIvC.png" alt="enter image description here"></p> <p>Add this snippet to your CSS style sheet (may or may not work depending on browser):</p> <pre><code>canvas { image-rendering: optimizeSpeed; // Older versions of FF image-rendering: -moz-crisp-edges; // FF 6.0+ image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming) image-rendering: -o-crisp-edges; // OS X &amp; Windows Opera (12.02+) image-rendering: crisp-edges; // Possible future browsers. -ms-interpolation-mode: nearest-neighbor; // IE (non standard naming) } </code></pre> <p><strong>Update:</strong> The <a href="http://dev.w3.org/csswg/css-images/#image-rendering" rel="nofollow noreferrer">current form of the standard</a> (with status "<em>not ready for implementation</em>") specify <code>crisp-edges</code> and not <code>optimize-contrast</code> as possible future standard. CSS class above is updated with this to reflect this for the non-prefixed value.<br> <em>- end update -</em></p> <p>For webkit browsers you can disable image smoothing for the canvas element like this:</p> <pre><code>context.webkitImageSmoothingEnabled = false; </code></pre> <p>and for Mozilla:</p> <pre><code>context.mozImageSmoothingEnabled = false; </code></pre> <p>(when this latter is available the CSS class is not necessary unless you scale the element itself which in any case should be avoided).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload