Fabric image overlay ex.

by gavinfoley

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>

CSS

canvas {
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}

JavaScript

// canvas
var canvas = new fabric.Canvas('c');
canvas.clear();

fabric.Image.fromURL('http://upload.wikimedia.org/wikipedia/en/3/35/Starbucks_Coffee_Logo.svg', function(img) {
  img.left = 50;
  img.top = 50;
  canvas.add(img);
  img.bringToFront();
  c = null;
}, {
  crossOrigin: '*'
})

fabric.Image.fromURL('https://i.imgur.com/sVR6CXf.png', function(img) {
  img.left = 50;
  img.top = 50;
  canvas.add(img);
  img.bringToFront();
  c = null;

  //canvas.renderAll();
}, {
  crossOrigin: '*'
})



setTimeout(function() {

  var ctx = canvas.getContext('2d');
  var data = ctx.getImageData(0, 0, 20, 20);

  var c = document.createElement('canvas');

  c.setAttribute('id', '_temp_canvas');
  c.width = 20;
  c.height = 20;

  c.getContext('2d').putImageData(data, 0, 0);



  var img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.src = canvas.toDataURL({
    format: "jpeg",
    quality: 0.9,
  });

  $('body').prepend(img);


  console.log(canvas.toDataURL());
}, 1000);