Node.js | Fabric.js Demos

Fabric.js tests · Node.js

Hello gejhM

Node.js has to be started with `node server.js` from root "fabricjs.com" dir.

Don't forget to `npm update fabric` before testing.

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

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

var line = new fabric.Line([10, 10, 120, 60], {
  left: 100,
  top: 100,
  stroke: 'rgba(255,0,0,0.5)',
  strokeWidth: 5
});
canvas.add(line);

var triangle = new fabric.Triangle({
  left: 100,
  top: 100,
  width: 70,
  height: 70,
  fill: 'blue'
});
canvas.add(triangle);

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 70,
  height: 70,
  fill: 'red',
  angle: 30
});
canvas.add(rect);

var src = 'http://fabric5.fabricjs.com/assets/pug.jpg';
fabric.util.loadImage(src, function(img) {
  var oImg = new fabric.Image(img);
  oImg.set({
    left: 100,
    top: 100,
  });
  canvas.add(oImg);
  proceed();
});

var src = 'http://fabric5.fabricjs.com/assets/pug.jpg';
fabric.util.loadImage(src, function(img) {
  var oImg = new fabric.Image(img);
  oImg.scale(0.2).set({
    left: 100,
    top: 100,
  });
  canvas.add(oImg);
  proceed();
});

var json = '{"objects":[{"type":"path","left":104,"top":96,"width":99,"height":115,"fill":"#00274D","overlayFill":null,"stroke":null,"strokeWidth":1,"scaleX":1.04,"scaleY":1.04,"angle":-25.8,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"path":[["M",67.39,22.39],["c",2.59,-0.43,5.11,1.44,5.54,4.18],["c",0.43,2.66,-1.3,5.26,-3.89,5.69],["c",-1.8,0.29,-3.6,-0.58,-4.61,-2.02],["L",44.5,34.56],["l",10.87,59.62],["c",17.42,-4.46,26.06,-14.18,27.5,-29.02],["l",-10.01,-0.72],["L",88.7,51.91],["l",9.43,21.24],["c",-3.38,-1.95,-5.9,-5.11,-9.29,-7.06],["c",-0.29,25.06,-27.14,32.76,-33.77,47.95],["C",44.42,100.08,26.5,114.77,6.91,82.8],["L",0,92.45],["l",1.51,-21.6],["l",19.66,4.68],["l",-9.43,3.67],["c",7.49,11.59,17.57,19.87,36.43,16.42],["L",36.22,36.57],["l",-18.65,2.38],["c",-0.14,2.16,-1.73,4.03,-3.89,4.39],["c",-2.59,0.43,-5.04,-1.44,-5.54,-4.1],["c",-0.43,-2.74,1.3,-5.26,3.89,-5.69],["c",1.94,-0.36,3.89,0.65,4.9,2.3],["l",17.93,-4.82],["l",-1.37,-6.84],["c",-4.82,-0.79,-8.93,-4.75,-9.79,-10.08],["c",-1.15,-6.62,3.1,-12.89,9.43,-13.97],["c",6.41,-1.01,12.46,3.46,13.54,10.08],["c",0.86,5.18,-1.58,10.15,-5.69,12.6],["l",1.87,6.12],["l",20.74,-2.88],["C",64.01,24.26,65.52,22.75,67.39,22.39],["L",67.39,22.39],["z"],["M",33.91,5.18],["c",-3.46,0.58,-5.76,3.96,-5.11,7.56],["c",0.58,3.6,3.89,6.05,7.27,5.47],["c",3.46,-0.58,5.76,-3.96,5.18,-7.56],["C",40.61,7.05,37.37,4.61,33.91,5.18],["z"]]}],"background":"rgba(0, 0, 0, 0)"}';

canvas.loadFromDatalessJSON(json, proceed);

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/15.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }).scale(0.4));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/25.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/35.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }).scale(0.4));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/45.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/55.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }).scale(0.3));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/65.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }).scale(0.35));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/85.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }));
  proceed();
});

fabric.loadSVGFromURL('http://fabric5.fabricjs.com/assets/95.svg', function(ob,op){
  canvas.add(new fabric.PathGroup(ob, op).set({ left: 100, top: 100 }).scale(0.5));
  proceed();
});

fabric.Image.fromURL('http://fabric5.fabricjs.com/assets/pug.jpg', function(img){
  canvas.add(img.set({ left: 100, top: 100 }).scale(0.2));
  proceed();
});

fabric.Image.fromURL('http://fabric5.fabricjs.com/assets/pug.jpg', function(img){
  canvas.add(img.set({ flipX: true, left: 100, top: 100 }).scale(0.2));
  proceed();
});

fabric.Image.fromURL('http://fabric5.fabricjs.com/assets/pug.jpg', function(img){
  canvas.add(img.set({ flipY: true, left: 100, top: 100 }).scale(0.2));
  proceed();
});

fabric.Image.fromURL('http://fabric5.fabricjs.com/assets/pug.jpg', function(img){
  canvas.add(img.set({ flipX: true, flipY: true, left: 100, top: 100 }).scale(0.2));
  proceed();
});

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 100,
  height: 100,
  fill: '#ddd',
  strokeWidth: 3,
  strokeDashArray: [10, 5],
  stroke: '#555'
});
canvas.add(rect);

var text = new fabric.Text('Hello gejhM\n123', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 100,
  top: 100,
  fill: 'red',
  originY: 'center',
  lineHeight: 2
});
canvas.add(text);

var text = new fabric.Text('Mgh123', {
  fontFamily: 'Arial',
  fontStyle: 'italic',
  fontSize: 30,
  left: 100,
  top: 100,
  fill: 'red',
  lineHeight: 1
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  fontWeight: 'bold',
  left: 100,
  top: 100,
  fill: 'red'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  fontWeight: 'bold',
  fontStyle: 'italic',
  left: 100,
  top: 100,
  fill: 'red'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 100,
  top: 100,
  fill: 'green',
  flipX: true
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 100,
  top: 100,
  fill: 'green',
  flipY: true
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 10,
  top: 20,
  fill: 'blue',
  originX: 'left',
  originY: 'top'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 10,
  top: 20,
  fill: 'blue',
  originX: 'left',
  originY: 'center'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 10,
  top: 20,
  fill: 'blue',
  originX: 'left',
  originY: 'bottom'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 100,
  top: 20,
  fill: 'blue',
  originX: 'center',
  originY: 'top'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 160,
  top: 20,
  fill: 'blue',
  originX: 'right',
  originY: 'top'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 160,
  top: 20,
  fill: 'blue',
  originX: 'right',
  originY: 'center'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 160,
  top: 20,
  fill: 'blue',
  originX: 'right',
  originY: 'bottom'
});
canvas.add(text);

var text = new fabric.Text('Hello world', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 100,
  top: 50,
  fill: 'green',
  textDecoration: 'underline line-through overline'
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 50,
  top: 75,
  fill: 'red'
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 50,
  top: 75,
  fill: 'red',
  lineHeight: 2
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 50,
  top: 75,
  fill: 'red',
  lineHeight: 2,
  textDecoration: 'underline'
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 50,
  top: 75,
  fill: 'red',
  lineHeight: 2,
  textDecoration: 'line-through'
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 50,
  top: 75,
  fill: 'red',
  lineHeight: 2,
  textDecoration: 'overline'
});
canvas.add(text);

var text = new fabric.Text('XY', {
  fontFamily: 'Impact',
  fontSize: 100,
  left: 100,
  top: 50,
  fill: 'green',
  stroke: 'red',
  strokeWidth: 2
});
canvas.add(text);

var text = new fabric.Text('Tрололо', {
  fontSize: 40,
  left: 100,
  top: 50,
  fill: 'blue'
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  angle: -30,
  left: 75,
  top: 75,
  fill: 'red'
});
canvas.add(text);

var text = new fabric.Text('foo\nbar\nbaz', {
  fontFamily: 'Arial',
  fontSize: 30,
  angle: -30,
  left: 75,
  top: 75,
  fill: '#fff',
  textBackgroundColor: 'grey'
});
canvas.add(text);

var text = new fabric.Text('Hello\nbar\nworld!', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 75,
  top: 75,
  textAlign: 'center'
});
canvas.add(text);

var text = new fabric.Text('Hello\nbar\nworld!', {
  fontFamily: 'Arial',
  fontSize: 30,
  left: 75,
  top: 75,
  textAlign: 'right'
});
canvas.add(text);

var text = new fabric.Text('lorem ipsum\ndolor sit\namet', {
  fontFamily: 'Arial',
  fontSize: 24,
  left: 100,
  top: 75,
  textAlign: 'justify'
});
canvas.add(text);

var text = new fabric.Text('lorem ipsum\ndolor sit\namet', {
  fontFamily: 'Arial',
  fontSize: 24,
  left: 100,
  top: 75,
  fill: 'purple',
  textAlign: 'right',
  textDecoration: 'underline'
});
canvas.add(text);

var text = new fabric.Text('     New Text L', {
  fontFamily: 'Arial',
  fontSize: 24,
  left: 100,
  top: 75,
  fill: 'purple',
  textAlign: 'left'
});
canvas.add(text);

var text = new fabric.Text('     New Text L', {
  fontFamily: 'Arial',
  fontSize: 24,
  left: 100,
  top: 50,
  fill: 'purple',
  textAlign: 'left',
  backgroundColor: 'yellow'
});
canvas.add(text);

var text = new fabric.Text('     New Text C', {
  fontFamily: 'Arial',
  fontSize: 24,
  left: 100,
  top: 50,
  fill: 'purple',
  textAlign: 'center',
  backgroundColor: 'yellow'
});
canvas.add(text);

var text = new fabric.Text('     New Text R', {
  fontFamily: 'Arial',
  fontSize: 24,
  left: 100,
  top: 50,
  fill: 'purple',
  textAlign: 'right',
  backgroundColor: 'yellow'
});
canvas.add(text);

var text = new fabric.Text('New Text', {
  angle: 270,
  fill: '#ff3216',
  fontFamily: 'Arial',
  fontSize: 26,
  height: 33.8,
  width: 109,
  left: 66,
  top: 41,
  originY: 'top'
});
canvas.add(text);