DailyJS

HiDPI Canvas Polyfill, formatter.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

canvas browser polyfills

HiDPI Canvas Polyfill, formatter.js

Posted by Alex R. Young on .
Featured

canvas browser polyfills

HiDPI Canvas Polyfill, formatter.js

Posted by Alex R. Young on .

HiDPI Canvas Polyfill

Don't you just hate it when a cool canvas animation suddenly goes blurry? HiDPI Canvas Polyfill by Jonathan Johnson scales the canvas so the PPI is right, avoiding unsightly blurring. Jonathan notes that Safari is currently the only browser that does this properly.

I don't know if the author was inspired by How do I fix blurry text in my HTML5 canvas? on Stack Overflow, but the solution looks similar to MyNameIsKo's answer.

Jonathan has gone further by including tests, and he's included a Grunt build script as well.

Jonathan also sent in BubbleChart (GitHub: jondavidjohn / bubblechart, License: Apache 2.0, npm: bubblechart) which is an interactive visualisation for two dimensional data.

formatter.js

formatter.js (GitHub: firstopinion / formatter.js, License: MIT) by Jarid Margolin helps you to define custom form fields. The examples given are a credit card form and a telephone number entry. The script can insert text as the user types, so the credit card form inserts hypens, and the telephone number uses the US-style format with brackets and a single hyphen.

The API looks like this, but there's a jQuery wrapper as well:

new Formatter(document.getElementById('credit-input'), {  
  pattern: '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});

The project includes tests that can be run with npm, and there are examples here: formatter.js demos.