Firefox Development Highlights – Viewport percentage, canvas.toBlob() and WebRTC

To keep you updated on the latest features in Firefox, here is again a blog post highlighting the most recent changes. This is part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

Viewport-percentage lengths

Gecko now supports new lenght units: vh, vw, vmin and vmax. 1vh is 1% of the viewport height, and the length doesn’t depend on its container size. We can build designs that are directly proportional to the page size (think about HTML slides for example, which are supposed to keep the same appearance regardless the size of the page).

1/100th of the height of the viewport.
1/100th of the width of the viewport.
1/100th of the minimum value between the height and the width of the viewport.
1/100th of the maximum value between the height and the width of the viewport.

Read more about CSS Viewport-percentage lengths on MDN.


A Blob object represents a file-like object of immutable, raw data. Blobs can be used by different APIs, like the File API or IndexedDB. We can create an alias URL the refers to the blob with window.URL.createObjectURL, which can be used in place of data URLs in some cases (which is better memory wise).

Now, a canvas element can export its content as an image blob with the toBlob() method (this replaces the non standard mozGetAsFile function). toBlob is asynchronous:

toBlob(callback, type) // type is "image/png" by default

For more information, see Example: Getting a file representing the canvas on MDN.

WebRTC in Firefox Nightly and Firefox Aurora (Firefox 18)

To enable our WebRTC code in Firefox’s Nightly desktop build, browse to about:config and change the media.peerconnection.enabled preference to true. More WebRTC documentation on MDN, and we plan to have future blog posts about WebRTC here on Mozilla Hacks.

Additionally, if you are interested in a steady flow of the latest Firefox highlights, you can also follow @FirefoxNightly on Twitter.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


  1. Robin Amphlett

    The example under the link “getting a file representing canvas on MDN” does not work – I copiied the example in the HTMLCanvasElement page and replace the function test and it now works.

    Great Job – this was just what I was looking for

    February 20th, 2013 at 03:01

    1. Robert Nyman [Editor]

      Since MDN is a wiki, could you be so kind and update the thing that was incorrect?

      February 20th, 2013 at 07:12

Comments are closed for this article.