8

I need to create circles in canvas using fabric. Every click, there is a circle created. However, if the new circle created it will replace old circle. This my stackblitz demo.

HTML

<canvas #canvas id="canvas" width="900" height="400" >
  <p>Your browser doesn't support canvas!</p>
</canvas>

TS

    this.canvas = new fabric.Canvas('canvas');
    var circle = new fabric.Circle({
    radius: 20,
    fill: '#eef',
    originX: 'center',
    originY: 'center'
});
    var text = new fabric.Text(`${data.data.name}`, {
    fontSize: 30,
    originX: 'center',
    originY: 'center'
});
    this.group = new fabric.Group([circle, text], {
    left: event.e.offsetX,
    top: event.e.offsetY,
    angle: 0
});
console.log(this.group);
this.canvas.add(this.group);

this.canvas.setActiveObject(this.canvas.item[0]);
this.canvas.renderAll();
2
  • 1
    I don't get what do you want? what is the problem? can you explain more? Commented Dec 29, 2021 at 23:50
  • Hi @AmirrezaNoori.., I've update my question with Stackblitz demo
    – Fash
    Commented Dec 30, 2021 at 3:56

1 Answer 1

5
+100

The problem is that you're repeatedly creating the Canvas object, which is likely resulting in the canvas element being drawn over multiple times in separate instances. That is, every new instance will only ever contain the most recent circle and will draw over the previous instance. What you want to do is create the instance once and then reference that instance each time moving forward.

In your code snippet above, it could look something like this:

// Ensures that the instance is only created once!
if(!this.canvas) {
    this.canvas = new fabric.Canvas('canvas');
}

var circle = new fabric.Circle({
    radius: 20,
    fill: '#eef',
    originX: 'center',
    originY: 'center'
});

var text = new fabric.Text(`${data.data.name}`, {
    fontSize: 30,
    originX: 'center',
    originY: 'center'
});

this.group = new fabric.Group([circle, text], {
    left: event.e.offsetX,
    top: event.e.offsetY,
    angle: 0
});

console.log(this.group);
this.canvas.add(this.group);

this.canvas.setActiveObject(this.canvas.item[0]);
this.canvas.renderAll();

I've even added relevant changes to your stackblitz project in a fork to help illustrate how this could be accomplished.

4
  • 1
    It working like Cham.. Thank you so much you save my day..
    – Fash
    Commented Dec 30, 2021 at 4:27
  • Can I as one more question., How to prevent pop up modal open when I click on circle ?
    – Fash
    Commented Dec 30, 2021 at 4:54
  • @Fash That's unfortunately beyond the scope of the original question and would thus violate the stackoverflow site guidelines. That said, please feel free to submit a separate question, including any information on different approaches you've considered and attempted to solve the problem. If I see it, then I'll be certain to take a look!
    – B. Fleming
    Commented Dec 30, 2021 at 5:01
  • oo. okey.. i'm so sorry..
    – Fash
    Commented Dec 30, 2021 at 5:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.