subpixel - w3toppers.com

Poor anti-aliasing of text drawn on Canvas

My answer came from this link, maybe it will help someone else. http://www.html5rocks.com/en/tutorials/canvas/hidpi/ The important code is as follows. // finally query the various pixel ratios devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1, ratio = devicePixelRatio / backingStoreRatio; // upscale the canvas if the … Read more

Animate CSS background-position with smooth results (sub-pixel animation)

Checkout this example: #content { height: 300px; text-align: center; font-size: 26px; color: #000; position:relative; } .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; animation-name: MOVE-BG; animation-duration: 100s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes MOVE-BG { from { transform: translateX(0); } to { transform: translateX(-187%); } … Read more

Subpixel anti-aliased text on HTML5’s canvas element

It’s now possible to get sub-pixel font rendering by creating an opaque canvas context. In Safari and Chrome you can get this using this snippet: var ctx = canvas.getContext(“2d”, {alpha: false}) I found this from this blog post.

Sub-Pixels calculated and rendered differently among browsers

As you already know, the problem arises from a different approach to subpixel calculus between browsers In Chrome, for instance, borders can have a fractional size, but margins are handled different (as integers). I don’t have documentation about it from the Chrome team, but it’s what can be seen in dev tools: AFAIK, there is … Read more