JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://github.com/blueimp/JavaScript-Canvas-to-Blob/raw/master/canvas-to-blob.min.js"></script>

JavaScript

var M = Backbone.Model.extend({
  url: '/echo/json/',
  
  uploadToServer: function (file, filename) {
       var self = this,
          data = new FormData(),
          xhr = new XMLHttpRequest();
  
      // When the request has successfully completed.
      xhr.onload = function () {
         console.log('onload');
      };
    
      xhr.onreadystatechange=function() {
         console.log('onreadystatechange', xhr.readyState );
      };

      data.append('file', file, filename);
      xhr.open('POST', this.url, true);
      xhr.send(data);
  }
});


var m = new M(),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext("2d");

canvas.width = 100;
canvas.height = 100;
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 100, 100);
 
document.body.appendChild(canvas);

canvas.toBlob( function (blob) {
  m.uploadToServer(blob, 'filename.jpg');
}, 'image/jpeg');