Hiio.com

 xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener(
          "progress",
          function (evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              setProgress(percentComplete);
            }
          },
          false
        );
        xhr.addEventListener(
          "progress",
          function (evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              setProgress(percentComplete);
            }
          },
          false
        );

        return xhr;
      },

참고 : https://codepen.io/alexpetergill/pen/XdGjGd

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var left = canvas.offsetLeft;
var top = canvas.offsetTop;
var pixel;
var data;
var r = 0;
var g = 0;
var b = 0;
draw(r,g,b);
$('canvas').mousedown(function (e) {
    
    $('canvas').mousemove(function (e) {
        var x = e.clientX - left;
        var y = e.clientY - top;
        console.log(x,y);
        pixel = ctx.getImageData(x, y, 1, 1);
        data = pixel.data;
    })
})
$('canvas').mouseup(function (e) {
    r = data[0];
    g = data[1];
    b = data[2];
    draw(r,g,b);
    console.log(r,g,b)
})

var gradient;

gradient = ctx.createLinearGradient(0, 5, 0, 140);
gradient.addColorStop(0, "rgb(255, 0, 0,1)");
gradient.addColorStop(0.2, "rgba(255, 255, 0, 1)");
gradient.addColorStop(0.4, "rgba(0, 255, 0, 1)");
gradient.addColorStop(0.6, "rgba(0, 255, 255, 1)");
gradient.addColorStop(0.8, "rgba(0, 0, 255, 1)");
gradient.addColorStop(1, "rgba(255, 0, 255, 1)");
// gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
// gradient.addColorStop(0.5, "rgba(0, 255, 0, 1)");
// gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
ctx.fillStyle = gradient;
ctx.fillRect(280, 0, 10, 200);
function draw(r,g,b){

    for(var i=0 ; i<256 ; i++){
        var ri  = i * (1 - r/255)
        var gi  = i * (1 - g/255)
        var bi  = i * (1 - b/255)
        var endpoing = [String(255-ri),String(255-gi),String(255-bi)].join(',')
        gradient = ctx.createLinearGradient(0, 5, 0, 160);
        gradient.addColorStop(0, "rgb("+endpoing+")");
        gradient.addColorStop(1, "rgb(0, 0, 0 , 1)");
        // gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
        // gradient.addColorStop(0.5, "rgba(0, 255, 0, 1)");
        // gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
        ctx.fillStyle = gradient;
        ctx.fillRect(i, 0, 2, 200);
        pixel = ctx.getImageData(0, 0, 1, 1);
    }
}