subpixel

I'm drawing text on Canvas, and am disappointed with the quality of antialiasing. As far as I've been able to determine, browsers don't do subpixel antialising of text on Canvas. Is this accurate? This is particularly noticeable on iPhone and Android, where the resulting text isn't as crisp as text rendered by other DOM elements. Any suggestions for high quality text out put on Canvas? Joubert 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

I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here: http://jsfiddle.net/5pVr4/2/ @-webkit-keyframes MOVE-BG { from { background-position: 0% 0% } to { background-position: 187% 0% } } #content { width: 100%; height: 300px; background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat; text-align: center; font-size: 26px; color: #000; -webkit-animation-name: MOVE-BG; -webkit-animation-duration: 100s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite

I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element with text rendered on it. On the bottom you can see both "F"s placed side by side and zoomed in. Notice how the H1 element blends better with the background: Here's the code I'm using to render the canvas text: var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.font = '26px Arial'; ctx.fillText('Quick

The purpose: I am working on a code similar to this to create a component where an input field has an embedded button : http://codepen.io/anon/pen/pgwbWG?editors=110 As you can see, the button is positioned absolutely with top and bottom set to 0 , to achieve a 100% height element. Also to note is that the border of the text-input must stay visible and also wrap the button . To achieve this I added a margin: 1px to the button so that there is (should be) space to display the surrounding text-input red border (usually when the input field content is invalid). The problem: is that on Firefox it