Fabric.js tests · SVG Export (stroke)

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 75,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(circle);

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 75,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(circle);

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 75,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(circle);

var shape = new fabric.Rect({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Rect({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Rect({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

var shape = new fabric.Triangle({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Triangle({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Triangle({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

var shape = new fabric.Line([10,10,100,100], {
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Line([10,10,100,30], {
  stroke: '#00f',
  strokeWidth: 3,
});
shape.set('width', 150);
canvas.add(shape);
var shape2 = new fabric.Line([10,40,100,50], {
  stroke: '#0f0',
  strokeWidth: 3,
});
shape2.set('height', 50);
canvas.add(shape2);

var shape = new fabric.Line([10,10,100,100], {
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Line([10,10,100,100], {
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

var shape = new fabric.Ellipse({
  left: 150,
  top: 150,
  rx: 100,
  ry: 50,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Ellipse({
  left: 150,
  top: 150,
  rx: 100,
  ry: 50,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Ellipse({
  left: 150,
  top: 150,
  rx: 100,
  ry: 50,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

var shape = new fabric.Polyline([
  {x:100,y:100},
  {x:150,y:150},
  {x:300,y:150},
  {x:400,y:100},
  {x:300,y:0},
  {x:-100,y:-100}
], {
  left: 150,
  top: 150,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Polyline([
  {x:100,y:100},
  {x:150,y:150},
  {x:300,y:150},
  {x:400,y:100},
  {x:300,y:0},
  {x:-100,y:-100}
], {
  left: 150,
  top: 150,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Polyline([
  {x:100,y:100},
  {x:150,y:150},
  {x:300,y:150},
  {x:400,y:100},
  {x:300,y:0},
  {x:-100,y:-100}
], {
  left: 150,
  top: 150,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

var shape = new fabric.Polygon([
  {x:100,y:100},
  {x:150,y:150},
  {x:200,y:250},
  {x:220,y:100},
  {x:300,y:80},
  {x:80,y:20}
], {
  left: 150,
  top: 150,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Polygon([
  {x:100,y:100},
  {x:150,y:150},
  {x:200,y:250},
  {x:220,y:100},
  {x:300,y:80},
  {x:80,y:20}
], {
  left: 150,
  top: 150,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Polygon([
  {x:100,y:100},
  {x:150,y:150},
  {x:200,y:250},
  {x:220,y:100},
  {x:300,y:80},
  {x:80,y:20}
], {
  left: 150,
  top: 150,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

var shape = new fabric.Path('M 0 0 L 300 100 L 200 300 z', {
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 10]
});
canvas.add(shape);

var shape = new fabric.Path('M 0 0 L 300 100 L 200 300 z', {
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [10, 5]
});
canvas.add(shape);

var shape = new fabric.Path('M 0 0 L 300 100 L 200 300 z', {
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 3,
  strokeDashArray: [5, 20, 20, 5]
});
canvas.add(shape);

  fabric.Image.fromURL('/assets/ladybug.png', function(img) {
    img.set({
      stroke: '#333',
      strokeWidth: 3,
      strokeDashArray: [5, 10],
      padding: 20,
      left: 150,
      top: 150
    });
    canvas.add(img);
    proceed();
  });

  fabric.Image.fromURL('/assets/ladybug.png', function(img) {
    img.set({
      stroke: '#333',
      strokeWidth: 3,
      strokeDashArray: [10, 5],
      padding: 20,
      left: 150,
      top: 150
    });
    canvas.add(img);
    proceed();
  });

  fabric.Image.fromURL('/assets/ladybug.png', function(img) {
    img.set({
      stroke: '#333',
      strokeWidth: 3,
      strokeDashArray: [5, 20, 20, 5],
      padding: 20,
      left: 150,
      top: 150
    });
    canvas.add(img);
    proceed();
  });

  var shape = new fabric.Text('Text', {
    left: 150,
    top: 150,
    fontSize: 100,
    fontFamily: 'Impact',
    fill: '#ddd',
    stroke: 'red',
    strokeWidth: 3,
    strokeDashArray: [6, 3]
  });
  canvas.add(shape);

var shape = new fabric.Rect({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 10,
  strokeDashArray: [1, 1]
});
canvas.add(shape);

var shape = new fabric.Rect({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 1,
  strokeDashArray: [1, 1]
});
canvas.add(shape);

var shape = new fabric.Rect({
  left: 150,
  top: 150,
  width: 175,
  height: 140,
  fill: '#ddd',
  stroke: '#333',
  strokeWidth: 10,
  strokeDashArray: [54, 2]
});
canvas.add(shape);