Demos
Benchmarks
Docs
Tests
Fabric.js demos
· Kitchen Sink
Canvas complexity (number of paths):
Italic
Underline
Linethrough
Overline
Shadow
Text align:
Left
Center
Right
Bg color:
Add
simple shapes
to canvas:
Rectangle
Circle
Triangle
Add
images
to canvas:
Image 1
Image 2
Add
SVG shapes
to canvas:
36
paths
41
paths
54
paths
57
paths
65
paths
87
paths
90
paths
HTML5 logo (
96
paths)
124
paths
133
paths
141
paths
153
paths
167
paths
174
paths
183
paths
202
paths
224
paths
226
paths
236
paths
237
paths
278
paths
280
paths
321
paths
363
paths
404
paths
404
paths
444
paths
448
paths
464
paths
562
paths
563
paths
674
paths
710
paths
758
paths
778
paths
832
paths
850
paths
936
paths
1004
paths
1018
paths
1066
paths
1126
paths
1196
paths
1197
paths
1215
paths
1269
paths
1424
paths
1515
paths
1652
paths
1868
paths
1944
paths
1948
paths
1972
paths
2208
paths
2394
paths
2499
paths
2742
paths
3103
paths
3566
paths
3685
paths
3921
paths
4418
paths
4583
paths
4768
paths
8325
paths
9663
paths
12361
paths
12604
paths
12866
paths
13905
paths
14174
paths
17059
paths
19035
paths
19271
paths
22375
paths
29303
paths
41787
paths
1173
paths
600
paths
395
paths
756
paths
513
paths
359
paths
359
paths
676
paths
696
paths
341
paths
756
paths
1800
paths
476
paths
191
paths
223
paths
834
paths
651
paths
975
paths
401
paths
239
paths
246
paths
244
paths
180
paths
838
paths
308
paths
160
paths
841
paths
Image
Gradient 1
Gradient 2
Gradient 3
Arc(s) 1
Arc(s) 2
Arc(s) 3
Arc(s) 4
Transformed paths
Rasterize canvas to image
Clear canvas
Add text
Remove selected object/group
Lock horizontal movement
Lock vertical movement
Lock horizontal scaling
Lock vertical scaling
Lock rotation
Gradientify
Enter drawing mode
Width:
Color:
Load SVG:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg>
Load
Execute code:
// clear canvas canvas.clear(); // remove currently selected object canvas.remove(canvas.getActiveObject()); // add red rectangle canvas.add(new fabric.Rect({ width: 50, height: 50, left: 50, top: 50, fill: 'rgb(255,0,0)' })); // add green, half-transparent circle canvas.add(new fabric.Circle({ radius: 40, left: 50, top: 50, fill: 'rgb(0,255,0)', opacity: 0.5 }));
Execute