Canvas toJson

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

SCSS

#paper {
  border: solid 1px red;
}

JavaScript

const canvas = new fabric.Canvas('paper');

const redBox = new fabric.Rect({
    left: 100,
    top: 0,
    width: 100,
    height: 100,
    fill: 'red'
});

const text = new fabric.Textbox("Hello", {
    left: 100,
    top: 100,
    width: 50,
    height: 50,
    fill: 'white',
    fontSize: 40,
    lineHeight: 4.2,
    textBackgroundColor: 'black'
});

canvas.add(redBox);
canvas.add(text);
canvas.renderAll();