Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Canvas toBlob() Support Added in Chrome 50

The canvas element is getting an upgrade as of Chrome 50: it now supports the toBlob() method! This is great news for anyone generating images on the client side, who wants to -- say -- upload them to their server, or store them in IndexedDB for future use.

function sendImageToServer (canvas, url) {

  function onBlob (blob) {
    var request = new XMLHttpRequest();'POST', url);
    request.onload = function (evt) {
      // Blob sent to server.



Using toBlob() is great, because instead of manipulating a base64 encoded string that you get from toDataURL(), you can now you work with the encoded binary data directly. It’s smaller, and it tends to fit more use-cases than a data URI.

If you’re wondering whether you can draw image blobs to another canvas context, the answer is -- in Firefox and Chrome -- yes, absolutely! You can do this with the createImageBitmap() API, which is also landing in Chrome 50.