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