The JavaScript blog.


canvas browser polyfills

HiDPI Canvas Polyfill, formatter.js

Posted 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 (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.


ui canvas mobile windows

Signature Pad, Windows 8.1 Apps with Open Source JavaScript

Posted on .

Signature Pad

Signature Pad (GitHub: szimek / signaturepad, License: _MIT) by Szymon Nowak is a client-side library for drawing smooth signatures. It works with touchscreens and desktop browsers, and was inspired by the Smoother Signatures post on Square's (excellent) engineering blog.

The problem is that the signer's finger did not move in straight lines from point to point when tracing out this shape. Rather, our touch points are sampled from a full curve that the signer's finger traced on the touchscreen. While we can't know the original shape between the sampled points Android gave us, straight lines are not the best guess.

Szymon's implementation doesn't depend on any external libraries, and can draw signatures from DATA URIs.

var canvas = document.querySelector('canvas');  
var signaturePad = new SignaturePad(canvas);  
signaturePad.clear();     // Clears the canvas  
signaturePad.toDataURL(); // Returns signature image as data URL  
signaturePad.fromDataURL('data:image/png;base64,iVBORw0K...') // Draws signature image from data URL  

Building a Windows 8.1 App using Typescript and Open Source Libraries


This screencast by Ala Shiban demonstrates how to use some of Microsoft's technologies with open source projects like AngularJS to create a Windows Store application.

I put together a 17 minute video that gets you started with writing a native Win8.1 app using HTML, CSS, JavaScript, TypeScript, AngularJS, Bootstrap, underscore, BankersBox and jQuery. The goal of the tutorial is to go through the end-to-end experience of developing a win8.1 app as quickly as possible while not developing a random 'hello world' app.

It's a fast screencast that packs a lot in, so if you can't keep up check out the source at AlaShiban / Ingredimeals. It uses TypeScript, Blend for Visual Studio, NuGet, jQuery, AngularJS, Underscore, and Bootstrap. Custom fonts are used to give the application a Windows 8 feel.

I haven't used Windows 8 or Visual Studio much before, so I thought it was interesting seeing how it integrated with third-party open source JavaScript libraries through NuGet, and how debugging JavaScript worked.

Something I hadn't seen before was MSApp.execUnsafeLocalFunction. I noticed Ala had to wrap some calls inside AngularJS (mainly things that wrote to innerHTML) to satisfy Microsoft's security requirements for Windows Store apps.


libraries canvas browser coffeescript ES6

Data.IO, CoffyScript, Circular Progress

Posted on .


Data.IO (GitHub: scttnlsn / data.io, License: MIT, npm: data.io) by Scott Nelson is a library for bidirectional syncing over Socket.IO. It has server-side resources which encapsulate logic and persistence. Resources are stacks of composable middleware functions that sync client requests. The client-side component is comparatively lightweight -- it's lower-level than Backbone.js, so I suspect it could be used with any data binding library.

Data.IO allows you to keep core business logic on the server, while easily subscribing to data in the client. It's a bit like Backbone.js and Express, but purpose-built for working with data syncing.


CoffyScript (GitHub: loveencounterflow / coffy-script) by "loveencounterflow" is a port of CoffeeScript that adds support for yield from ES6:

If you have never programmed with iterators and generators, you may imagine as a 'resumable return' for starters. For the more technically oriented, ES6 defines generators as "First-class coroutines, represented as objects encapsulating suspended execution contexts (i.e., function activations)." Well, maybe 'resumable return' is not so bad after all.

# Using a star after the arrow 'licenses' the use of `yield` in the function body;
# it basically says: this is not an ordinary function, this is a generator function:
count = ->*  
  yield 1
  yield 2
  yield 3

# Calling a generator function returns a generator:
counting_generator = count()

# Now that we have a generator, we can call one of its methods, `next`:
log counting_generator.next()   # prints: { value: 1, done: false }

# ...and we can go on doing so until the generator becomes exhausted:
log counting_generator.next()   # prints: { value: 2, done: false }  
log counting_generator.next()   # prints: { value: 3, done: false }  
log counting_generator.next()   # prints: { value: undefined, done: true }  
log counting_generator.next()   # throws an error saying "Generator has already finished"  

The documentation in the readme is thorough, and explores various aspects of working with yield. For example: How Not to Yield to Callback Hell: Serializing Control Flow.

Circular Progress

Circular Progress

Circular Progress (GitHub: neoziro / circular-progress, License: MIT, bower: circular-progress) by Greg Bergé is a progress widget with no dependencies. Given a Canvas element, it'll show a circular representation of a process's progress:

var progress = new CircularProgress({  
  radius: 70,
  strokeStyle: 'black',
  lineCap: 'round',
  lineWidth: 4



libraries canvas node presentations Microsoft

Edge.js, Bespoke.js, Barcode39

Posted on .


Edge.js (GitHub: tjanczuk / edge, License: Apache 2, npm: edge) by Tomasz Janczuk is an in-process interoperability layer between .NET and Node. This allows things like CPU-bound operations to be processed by .NET, or Node to access the Win32 APIs through C#.

The .NET code can be executed asynchronously and may be passed as a multiline comment or a string. A basic example looks like this:

var edge = require('edge');

var helloWorld = edge.func('async (input) => { return ".NET Welcomes " + input.ToString(); }');

helloWorld('JavaScript', function(err, result) {  
  if (err) throw err;

Running this example would display ".NET welcomes JavaScript".

Other CLR languages can be supported, should you be interested in playing with F# for example.

This project requires Windows, and needs Visual Studio 2012, Python 2.7, and npm-gyp to build.



Bespoke.js (GitHub: markdalgleish / bespoke.js, License: MIT, bower: bespoke.js) by Mark Dalgleish is a small but slick presentation library. It works with keyboard and touch events, and is intended to be used with CSS transitions.

It's built using ECMAScript 5, so you'll want to run your presentations on a compatible browser.

Creating presentations involves wrapping HTML slide content in <section> containers. Horizontal and vertical deck styles are supported, and Mark has documented the CSS classes in the project's readme so you can hook into the provided JavaScript and styles.


Barcode39 (GitHub: erik5388 / barcode-39.js, License: MIT) by Erik Zettersten is a Code 39 implementation -- it basically generates barcodes that almost all barcode readers can cope with. It can output data URIs and supports Canvas for drawing.

The JavaScript API is new Barcode39(elementId, type, delimeter), but it will also look for an element with the default ID of barcode and read the element's content for the barcode's source text.


jquery canvas plugins images widgets tree

jQuery Roundup: 2.0 Beta 2, Alpha Image, jqTree

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

jQuery 2.0 Beta 2

jQuery 2.0 Beta 2 is out, which has fixes for most of the major parts of the framework. This version also includes a Grunt build script, so you can build custom versions of jQuery more easily. The announcement posts suggests swapping out Sizzle for another selector engine.

jQuery 2.0 removes compatibility for IE before version 9, so you'll have to use 1.9 if you want to support legacy browsers.

jQuery Alpha Image

jQuery Alpha Image (GitHub: Sly777 / Jquery-Alpha-Image, License: MIT/GPL, bower: Jquery-Alpha-Image) by İlker Güller uses a temporary Canvas to make a colour in an image transparent. It supports RGB and hex colours and has a callback that runs when the process has finished:

  colour: '#9CDAF0',
  onlyData: true,
  onComplete: function(result) {


jqTree (GitHub: mbraak / jqTree, License: Apache 2.0) by Marco Braak is a widget that creates trees using unordered lists based on JSON data. It supports drag and drop for reordering items or moving them between parents, and supports IE7+.

The author has included tests, and the documentation is detailed, with lots of examples. The events API is thoughtful as well -- you can even track when items are added to the tree with onCreateLi:

  data: data,
  onCreateLi: function(node, $li) {
    // Add 'icon' span before title
    $li.find('.jqtree-title').before('<span class="icon"></span>');