I need to watch the changes in an canvas object (I'm using fabricjs library).

var canvas = this.__canvas = new fabric.Canvas('canvas', {isDrawingMode:true});
//I need to watch the changes here -> 
canvas.toJSON();

I try out with Object.prototype.watch() like:

canvas.toJSON.watch('objects', function(){ //dosomething});

But that hasn't worked for me, any help?

I need to watch the changes in an canvas object (I'm using fabricjs library).

var canvas = this.__canvas = new fabric.Canvas('canvas', {isDrawingMode:true});
//I need to watch the changes here -> 
canvas.toJSON();

I try out with Object.prototype.watch() like:

canvas.toJSON.watch('objects', function(){ //dosomething});

But that hasn't worked for me, any help?

• javascript
• json
• canvas
• fabricjs

2 Answers 2

Since your example mentioned isDrawingMode:true I think you are looking for a way to detect the drawing on you canvas in free hand mode.

Fabric JS expose a long list of events, as you can read here.

So if you want to detect the free drawing on your canvas you can use path:created event.

var canvas = new fabric.Canvas('canvas',{isDrawingMode:true});
canvas.on('path:created', function(event) {
    //log the svg path  info
   console.log(event.path.path);
})

<script src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>

The canvas calls it's own events as outlined in this doc: Class: Canvas where you will see lots of events the canvas emits.

The event for checking if the object is modified is below:

canvas.on('object:modified', function(event) {
    // the object that has been modified is in:
    event.target
})