Fabric - bleedmarks

by STHayden

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #ccc;
}

JavaScript

var canvas = new fabric.Canvas('c', { 
	selection: true,
  preserveObjectStacking: true,
});
window.canvas = canvas;

var line1 = new fabric.Line([
  10, 0,
  10, canvas.height
],{ 
  stroke: '#000', 
})
var line2 = new fabric.Line([
  canvas.width - 10, 0,
  canvas.width - 10, canvas.height
],{ 
  stroke: '#000', 
})
var line3 = new fabric.Line([
  0, 10,
  canvas.width, 10
],{ 
  stroke: '#000', 
})
var line4 = new fabric.Line([
  0, canvas.height - 10,
  canvas.width, canvas.height - 10
],{ 
  stroke: '#000', 
});

var group = new fabric.Group([
	line1,
  line2,
  line3,
  line4
]);
group.selectable = false;
group.evented = false;

canvas.add(group);

canvas.add(new fabric.Circle({ 
  left: 300, 
  top: 300, 
  radius: 50, 
  fill: '#9f9', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));
group.bringToFront();