I am creating an application where when the user clicks on the canvas, a draggable rectangle object is created on the coordinates of the mouse click. I have successfully achieved this but the issue I am having is every time I try to adjust or drag the already added rectangles on the canvas it creates new objects.

I would be really grateful if you experts would provide any code snippets/ references so that I could achieve this. :) thank you below is my code snippet.

HTML

<input type="button" value="addrect" onclick="addrect()">
<input type="button" value="undo" onclick="undo()">
<input type="button" value="redo" onclick="redo()">
<input type="button" value="clear" onclick="clearcan()">
<br/>
<canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>

JS

/*
undo redo mandhistory with canvas
*/

var canvas = new fabric.Canvas('fabriccanvas');
canvas.counter = 0;
var newleft = 0;
canvas.selection = false;

canvas.on('mouse:up', function (e) {
    addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
});

addrect = function addrect(top, left, width, height, fill) {
    canvas.add(new fabric.Rect({
        top: top,
        name: 'rectangle ' + window.counter,
        left: left,
        width: 100,
        height: 100,
        fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
        //fix attributes applied for all rects
        opacity: 0.75,
        lockRotation: true,
        originX: 2,
        originY: 10,
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
        minScaleLimit: 1
    }));

    updateModifications(true);
    canvas.counter++;
    newleft += 100;
}
var state = [];
var mods = 0;
canvas.on(
    'object:modified', function () {
    updateModifications(true);
},
    'object:added', function () {
    updateModifications(true);
});

function updateModifications(savehistory) {
    if (savehistory === true) {
        myjson = JSON.stringify(canvas);
        state.push(myjson);
    }
}

undo = function undo() {
    if (mods < state.length) {
        canvas.clear().renderAll();
        canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
        canvas.renderAll();
        //console.log("geladen " + (state.length-1-mods-1));
        //console.log("state " + state.length);
        mods += 1;
        //console.log("mods " + mods);
    }
}

redo = function redo() {
    if (mods > 0) {
        canvas.clear().renderAll();
        canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
        canvas.renderAll();
        //console.log("geladen " + (state.length-1-mods+1));
        mods -= 1;
        //console.log("state " + state.length);
        //console.log("mods " + mods);
    }
}

clearcan = function clearcan() {
    canvas.clear().renderAll();
    newleft = 0;
}

I tried many ways to solve this but could not plete and I would be really grateful if you experts could provide me with a solution :) thanks

EDIT

I know that the issue is because I am capturing the mouse click event to create the object and the same event applies when an existing object is dragged thus creating a new object on the canvas. I would appreciate any suggestions on how to overe this issue :)

I am creating an application where when the user clicks on the canvas, a draggable rectangle object is created on the coordinates of the mouse click. I have successfully achieved this but the issue I am having is every time I try to adjust or drag the already added rectangles on the canvas it creates new objects.

I would be really grateful if you experts would provide any code snippets/ references so that I could achieve this. :) thank you below is my code snippet.

HTML

<input type="button" value="addrect" onclick="addrect()">
<input type="button" value="undo" onclick="undo()">
<input type="button" value="redo" onclick="redo()">
<input type="button" value="clear" onclick="clearcan()">
<br/>
<canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>

JS

/*
undo redo mandhistory with canvas
*/

var canvas = new fabric.Canvas('fabriccanvas');
canvas.counter = 0;
var newleft = 0;
canvas.selection = false;

canvas.on('mouse:up', function (e) {
    addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
});

addrect = function addrect(top, left, width, height, fill) {
    canvas.add(new fabric.Rect({
        top: top,
        name: 'rectangle ' + window.counter,
        left: left,
        width: 100,
        height: 100,
        fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
        //fix attributes applied for all rects
        opacity: 0.75,
        lockRotation: true,
        originX: 2,
        originY: 10,
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
        minScaleLimit: 1
    }));

    updateModifications(true);
    canvas.counter++;
    newleft += 100;
}
var state = [];
var mods = 0;
canvas.on(
    'object:modified', function () {
    updateModifications(true);
},
    'object:added', function () {
    updateModifications(true);
});

function updateModifications(savehistory) {
    if (savehistory === true) {
        myjson = JSON.stringify(canvas);
        state.push(myjson);
    }
}

undo = function undo() {
    if (mods < state.length) {
        canvas.clear().renderAll();
        canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
        canvas.renderAll();
        //console.log("geladen " + (state.length-1-mods-1));
        //console.log("state " + state.length);
        mods += 1;
        //console.log("mods " + mods);
    }
}

redo = function redo() {
    if (mods > 0) {
        canvas.clear().renderAll();
        canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
        canvas.renderAll();
        //console.log("geladen " + (state.length-1-mods+1));
        mods -= 1;
        //console.log("state " + state.length);
        //console.log("mods " + mods);
    }
}

clearcan = function clearcan() {
    canvas.clear().renderAll();
    newleft = 0;
}

I tried many ways to solve this but could not plete and I would be really grateful if you experts could provide me with a solution :) thanks

EDIT

I know that the issue is because I am capturing the mouse click event to create the object and the same event applies when an existing object is dragged thus creating a new object on the canvas. I would appreciate any suggestions on how to overe this issue :)

• javascript
• fabricjs

Share Improve this question Follow edited Feb 24, 2015 at 7:06 Hasitha Shan asked Feb 23, 2015 at 14:42 Hasitha ShanHasitha Shan 2,98066 gold badges4646 silver badges8585 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I found a solution to this problem. If anyone es accross this issue, here is the answer.

canvas.on('mouse:up', function (e) {
  //check if user clicked an object
  if (e.target) {
    //clicked on object
    alert('clicked on object');
  }else{
    //add rectangle
    addrect(e.e.clientY, e.e.clientX, 100, 100, "#CCCCC");
  }
});

This solution is defined in http://fabricjs./fabric-intro-part-2/#events . Here on mouse click I am checking if its an object on canvas. If its not an object I add a new rectangle. Hope this helps :)

When user clicks on object then that object will be active and object:selected event will be fired.

canvas.on({
  'object:selected': myfunction
});

In myfunction you can write your logic.

function myfunction(){
 alert("Object Selected.");
}