JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<script src="http://cloud.github.com/downloads/kangax/fabric.js/0.9.15.min.js"></script>
<div id="wrapper">
  <div class="canvas-container" style="width: 600px; height: 500px; position: relative; -webkit-user-select: none;">
      <canvas id="c" width="300" height="300"></canvas>
    </div>
</div>
<button title="save">Save</button>

JavaScript

var canvas = new fabric.Canvas('c', {
    hoverCursor: 'pointer',
    selection: false
});

canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    'object:modified': function(e) {
        e.target.opacity = 1;
    }
});

for (var i = 0, len = 15; i < len; i++) {
    fabric.Image.fromURL('../img/logo.png', function(img) {
        img.set({
            left: fabric.util.getRandomInt(0, 600),
            top: fabric.util.getRandomInt(0, 500),
            angle: fabric.util.getRandomInt(0, 90)
        });

        img.perPixelTargetFind = true;
        img.targetFindTolerance = 4;
        img.hasControls = img.hasBorders = true;

        img.scale(fabric.util.getRandomInt(50, 100) / 100);

        canvas.add(img);
    });
}
$('button').click(function() {
    var url = 'http://www.example.com/';
    var canvas = document.getElementById("c");
    var img    = canvas.toDataURL("image/png");
    document
    /*$.ajax({
        type: 'POST',
        url: url,
        data: img,
        success: success,
        dataType: "image/png"
    });*/
    document.write('<img src="'+img+'"/>');
    return false;
});

function success(data){
    console.log(data);
}