0
0
Mitul Dabhi
answered Apr 24 '23 00:00
Fabric.js is a powerful JavaScript library for working with HTML5 canvas, while jQuery is a popular JavaScript library for manipulating HTML and creating dynamic web applications. Fabric.js can work seamlessly with jQuery to create dynamic and interactive canvas elements on your web page.
Here's an example of how you can use Fabric.js with jQuery to create a simple canvas element and draw a rectangle:
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
$(function() {
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 100,
height: 100
});
canvas.add(rect);
});
</script>
</body>
</html>
In this example, we include both the jQuery and Fabric.js libraries in the head section of the HTML document. Then, we create a canvas element with an id of "canvas" in the body section of the document. In the script section, we use jQuery's document ready function to create a new Fabric.js canvas object and add a new Fabric.js rectangle object to the canvas.
This way, you can use Fabric.js with jQuery to create dynamic and interactive canvas elements on your web page. You can modify the example code to suit your needs and create even more complex canvas objects.