DailyJS

HiDPI Canvas Polyfill, formatter.js

2013-10-28 00:00:00 +0000 by Alex R. Young

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.