Fabric.js tests · SVG Export (text)

  addText('hello world', {
    fontFamily: 'Delicious',
    fill: 'red',
    left: 100,
    top: 50
  });

  addText('hello world', {
    fontFamily: 'Delicious',
    fill: '#555',
    left: 100,
    top: 50,
    textDecoration: 'underline'
  });

  addText('hello world', {
    fontFamily: 'Delicious',
    fill: '#555',
    left: 100,
    top: 50,
    textDecoration: 'overline'
  });

  addText('hello world', {
    fontFamily: 'Delicious',
    fill: '#333',
    left: 100,
    top: 50,
    textDecoration: 'line-through'
  });

  addText('foo bar baz', {
    fontFamily: 'Delicious',
    fill: '#f55',
    left: 100,
    top: 50,
    fontStyle: 'italic'
  });

  addText('hello world', {
    fontFamily: 'Delicious', fill: '#555', left: 100, top: 50, fontSize: 18, angle: 30
  });
  addText('foo bar baz', {
    fontFamily: 'Delicious', fill: 'green', left: 120, top: 150, fontSize: 24, angle: -30
  });
  addText('foo bar baz', {
    fontFamily: 'Delicious', fill: 'red', left: 60, top: 100, fontSize: 20, opacity: 0.5
  });

  addText('hello world', {
    fontFamily: 'DejaVu Serif',
    fill: '#555',
    left: 83,
    top: 50,
    fontSize: 26
  });

  addText('this is\na multiline\ntext!', {
    fontFamily: 'DejaVu Serif',
    fill: '#555',
    left: 83,
    top: 50,
    fontSize: 26
  });

  addText('this is\na multiline\ntext!', {
    fontFamily: 'DejaVu Serif',
    fill: '#f55',
    left: 100,
    top: 70,
    fontSize: 24,
    angle: 30
  });

  addText('this is\na multiline\ntext\naligned right!', {
    fontFamily: 'DejaVu Serif',
    fill: '#f55',
    left: 100,
    top: 70,
    fontSize: 24,
    textAlign: 'right'
  });

  addText('this text\nis\nmultiline\n&\ncentered!', {
    fontFamily: 'DejaVu Serif',
    fill: '#f55',
    left: 150,
    top: 100,
    fontSize: 30,
    textAlign: 'center'
  });

  addText('this is\na multiline\ntext\nwith\nbackground color!', {
    fontFamily: 'DejaVu Serif',
    fill: '#333',
    left: 100,
    top: 70,
    fontSize: 17,
    textBackgroundColor: '#aaf'
  });

  addText('this is\na multiline\ntext\nwith\ncustom lineheight!', {
    fontFamily: 'DejaVu Serif',
    fill: '#333',
    left: 100,
    top: 70,
    fontSize: 17,
    lineHeight: 5
  });

  addText('this is\na multiline\ntext\nwith\ncustom lineheight\n& background!', {
    fontFamily: 'DejaVu Serif',
    fill: '#333',
    left: 120,
    top: 100,
    fontSize: 17,
    lineHeight: 5,
    textBackgroundColor: 'red',
    angle: 15
  });

  addText('this text is multiline,\ncentered,\n& with background color!', {
    fontFamily: 'DejaVu Serif',
    fill: '#f55',
    left: 150,
    top: 100,
    fontSize: 20,
    textAlign: 'center',
    textBackgroundColor: '#ffc'
  });

  addText('this text is multiline,\ncentered,\nwith background color\n& custom lineheight!', {
    fontFamily: 'DejaVu Serif',
    fill: '#eee',
    left: 150,
    top: 150,
    fontSize: 18,
    textAlign: 'center',
    lineHeight: 3,
    textBackgroundColor: '#555'
  });

  addText('text\nwith\nshadow!', {
    fontFamily: 'Delicious',
    fill: 'red',
    left: 120,
    top: 120,
    fontSize: 55,
    shadow: 'rgba(0,0,0,0.3) 3px 3px 3px'
  });

  addText('Brisket turducken', {
    fontFamily: 'Courier New', fill: '#333', left: 150, top: 70, fontSize: 16,
  });
  addText('filet mignon chuck', {
    fontFamily: 'Courier New', fill: '#555', left: 150, top: 100, fontSize: 16,
  });
  addText('Salami pork chop', {
    fontFamily: 'Courier New', fill: '#777', left: 150, top: 130, fontSize: 16,
  });
  addText('bacon filet mignon', {
    fontFamily: 'Courier New', fill: '#999', left: 150, top: 160, fontSize: 16,
  });
  addText('kielbasa ribeye shoulder ', {
    fontFamily: 'Courier New', fill: '#bbb', left: 150, top: 190, fontSize: 16,
  });

  for (var i = 10; i < 300; i += 10) {
    canvas.add(new fabric.Line([i, 0, i, 300], { stroke: '#aaa', fill: '#aaa' }));
  }
  for (var i = 10; i < 300; i += 10) {
    canvas.add(new fabric.Line([0, i, 300, i], { stroke: '#aaa', fill: '#aaa' }));
  }

  addText('abcdefg\nhijklmn\nopqrstu\nvwxyz', {
    fontFamily: 'Delicious',
    fill: '#555',
    left: 120,
    top: 145,
    fontSize: 60
  });

  addText('text\nwith\nrgba() values!', {
    fontFamily: 'Delicious',
    fill: 'rgba(255,0,0,0.8)',
    textBackgroundColor: 'rgba(0,0,0,0.85)',
    left: 140,
    top: 120,
    fontSize: 40,
    shadow: 'rgba(255,255,255,0.9) 2px 2px 2px'
  });

  addText('text\n\nwith\n\ndouble\n\nnewlines!', {
    fontFamily: 'Delicious',
    fill: 'green',
    left: 100,
    top: 140,
    fontSize: 30
  });

  addText('scaled text', {
    fontFamily: 'Delicious',
    fill: 'purple',
    left: 150,
    top: 100,
    fontSize: 20,
    scaleX: 2,
    scaleY: 2
  });