Quick one: using download attribute on links to save Canvas as PNG

One of the things I always liked about Firefox is that you can right-click any canvas and select “save image as”. Chrome and others don’t do that (well, Chrome doesn’t). Instead you need to get the image data, create a url and open a new tab or something in that order.

One very simple way to allow people to save a canvas as an image (and name it differently – which would have to be done by hand in the case of right-clicking on Firefox) is to use the download attribute of a link.

You can see this in action in this JSFiddle. Simply paint something and click the “download image” link.

The relevant code is short and sweet (canvas is the reference of the canvas element):

var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL(); = "mypainting.png";
}, false);

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox Development Highlights: video.playbackRate and download attribute

Here are the latest features in Firefox for developers, as part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

<video>: support for custom playbackRate

Setting video.playbackRate changes the “video speed”. 1.0 is regular speed, 2.0 is 2 times faster. From the MDN documentation on HTMLMediaElement:

The default playback rate for the media. 1.0 is “normal speed,” values lower than 1.0 make the media play slower than normal, higher values make it play faster.


<video src="v.webm" id="v" controls autoplay></video>
<button onclick="fastForward()">fast foward</button>
  fastFoward() {
    v.playbackRate = 2;

Interactive demo:

video playbackRate demo

<a> “download” attribute

From Downloading resources in the Living standard at

In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the a or area element that creates the hyperlink to that resource.

This attribute is particularly useful with blobs. With Blobs, You can create files in JavaScript. A binary blob can be an image built in a canvas element for example. Linking binary blobs to a <a> element (with a URL constructor) and marking this <a> element as downloadable with this new attribute, the user will be able to save the blob as a file on his hard-drive.

Example from Tom Schuster’s blog post about his work on the HTML5 download attribute: ]

var blob = new Blob(["Hello World"]);
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob); = "hello-world.txt";
a.textContent = "Download Hello World!";

It has also been covered on HTML5Rocks in Downloading resources in HTML5.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Web Professional Trends for 2013 – “Responsive Design and Download” Interview with Chris Converse

Web Professional Trends for 2013 – Chris Converse, Codify Design Studio

In this twelve minute interview Chris Converse, partner, designer and developer at Codify Design Studio we learn about his perspective on the topic of Web Professional Trends for 2013 as it relates to Responsive Design, Responsive Downloads and Responsive Imagery.

Specifically we learn:

• About Chris and his Company
• More about Chris’s education and advocacy efforts to bridge the relationship between the Web Designer and Web developer
• About how he is building on the Responsive Design trends with Responsive Download discoveries
• About Responsive Imagery
• About Responsive Downloads with Media Quires, CSS3 and HTML5 Elements
• About faster downloads with less intensive bandwidth requirements
• Advice for those that teach
• Pros and the Cons of Responsive Imagery
• Efforts at the W3C that will enable browsers to communicate to the server and your device with specific download speed capabilities that could deliver high res images to your Mobile device
• Examples of Server Side Responsive Imagery to detect things with PHP and .NE, picking out those images and dynamically assembling them
• Trends to make images more compelling for tablets that are more animated and compelling that will utilize Containers and JavaScript that to achieve responsive download techniques
• How much we’ve progressed as an industry in the last decade
• An open discussion between Bill Cullifer, Exec and Chris Converse regarding the current status of the industry
• About some of the debate in the Web Design community about best practices
• More about the great work at the w3c to support the Web professional community
• Some wireless industry history and honorable mention of wireless pioneer Craig McCaw from Bill Cullifer
• Links to more information about Chris and his resources

More about Responsive Download and Imagery

According to an article written by Chris for, when considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the

is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

More about Chris Converse

Chris Converse has 20 years of experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as PHP, ActionScript, HTML5, CSS3, JavaScript and jQuery, making his design execution optimal across various media.

Chris is graduate of Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 15 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

If you’re interested in learning more about responsive web design in the library, consider checking out Creating a Responsive Web Design from Chris Converse at the links below:

A special shout out to Chris, a super nice and gracious guy for taking the time to talk with us!

View full post on Web Professional Minute

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)