Menu
I am very new to fabric.js. I have downloaded the fabric.js, but I don't know how to start it. For example:
<html>
<head>
<script src="fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('c1');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
In this script I supposed to see a circle. I followed this example: http://fabricjs.com/customization/
But why I couldn't see anything; what I am missing?
464
Fabric. js is based on HTML5 canvas, so just put a canvas object into an HTML file, with an id, and that's it. In the controller's AfterContentInit lifecycle hook (so the canvas was rendered inside the nice wrapper): this.
With the help of Fabric. js, every shape drawn on the canvas is a JavaScript object with properties and methods. Using these properties and methods we can manipulate the shape on the canvas without having to redraw the objects on the canvas manually.
js is a Javascript HTML5 canvas library. It is a fully open-source project with many contributions over the years.
The parameter of fabric.Canvas should match the canvas id in HTML.
Change the line
var canvas = new fabric.Canvas('c1');
to
var canvas = new fabric.Canvas('canvas');
This should work.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
