Fabric.js tests · SVG Export (background, overlay, patterns, gradients)

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 75,
  fill: '#ff6600'
});
canvas.add(circle);
canvas.setBackgroundColor('#0099cc', function () {
  canvas.renderAll();
  proceed();
});

var src = '../../assets/escheresque_ste.png';
canvas.setBackgroundColor({source: src, repeat: 'repeat'}, function () {
  canvas.renderAll();
  proceed();
});

var src = '../../assets/escheresque_ste.png';
canvas.setBackgroundColor({source: src, repeat: 'repeat-x'}, function () {
  canvas.renderAll();
  proceed();
});

var src = '../../assets/escheresque_ste.png';
canvas.setBackgroundColor({source: src, repeat: 'repeat-y'}, function () {
  canvas.renderAll();
  proceed();
});

var src = '../../assets/escheresque_ste.png';
canvas.setBackgroundColor({source: src, repeat: 'no-repeat'}, function () {
  canvas.renderAll();
  proceed();
});

var src = '../../assets/honey_im_subtle.png';
canvas.setBackgroundImage(src, function () {
  canvas.renderAll();
  proceed();
}, {
  backgroundImageStretch: true,
  backgroundImageOpacity: 1
});

var src = '../../assets/honey_im_subtle.png';
canvas.setBackgroundImage(src, function () {
  canvas.renderAll();
  proceed();
}, {
  backgroundImageStretch: false,
  backgroundImageOpacity: 0.4
});

var src = '../../assets/jail_cell_bars.png';
canvas.setOverlayImage(src, function () {
  canvas.renderAll();
  proceed();
}, {
  overlayImageLeft: 0,
  overlayImageTop: 0
});

var src = '../../assets/jail_cell_bars.png';
canvas.setOverlayImage(src, function () {
  canvas.renderAll();
  proceed();
}, {
  overlayImageLeft: 100,
  overlayImageTop: 100
});

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100
});
canvas.add(rect);

rect.setGradient('fill', {
  x1: 0, y1: 0,
  x2: rect.width, y2: rect.height,
  colorStops: {'0': '#fff', '0.8': '#555', '1': '#222' }
});
canvas.renderAll();

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 100
});
canvas.add(circle);
var radius = circle.get('radius');
circle.setGradient('fill', {
  x1: radius, y1: radius, r1: 0,
  x2: radius, y2: radius, r2: circle.get('radius'),
  colorStops: {'0': '#fff', '0.8': '#555', '1': '#222' }
});
canvas.renderAll();

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});
canvas.add(circle);

circle.setShadow({
  color: '#333',
  blur: 10,
  offsetX: 5,
  offsetY: 5
});
canvas.renderAll();

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'green'
});
canvas.add(circle);

circle.setShadow({
  color: 'green',
  blur: 10,
  offsetX: 5,
  offsetY: 5
});
canvas.renderAll();

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'grey'
});
canvas.add(circle);

circle.setShadow({
  blur: 10,
  offsetX: 30,
  offsetY: 5
});
canvas.renderAll();

var line = new fabric.Line([50, 100, 200, 200], {
  stroke: 'red',
  strokeWidth: 10
});
canvas.add(line);
line.setShadow({
  color: 'red',
  blur: 10
});
canvas.renderAll();

fabric.util.loadImage('/assets/retina_wood.png', function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat'
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: pattern
  });
  canvas.add(rect);
  proceed();
});

fabric.util.loadImage('/assets/escheresque.png', function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat-x'
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: pattern
  });
  canvas.add(rect);
  proceed();
});

fabric.util.loadImage('/assets/escheresque.png', function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'repeat-y'
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: pattern
  });
  canvas.add(rect);
  proceed();
});

fabric.util.loadImage('/assets/escheresque.png', function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'no-repeat'
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: pattern
  });
  canvas.add(rect);
  proceed();
});

fabric.util.loadImage('/assets/escheresque.png', function(img) {
  var pattern = new fabric.Pattern({
    source: img,
    repeat: 'no-repeat',
    offsetX: 20,
    offsetY: 20
  });
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    stroke: 'red',
    fill: pattern
  });
  canvas.add(rect);
  proceed();
});