When I click a circle, the rectangle is created around of circle.How can I remove it? /

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});


canvas.add(rect);
canvas.add(circle);

When I click a circle, the rectangle is created around of circle.How can I remove it? http://jsfiddle/yrL4eLsn/4/

var canvas = new fabric.Canvas(document.getElementById('c'));

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});


canvas.add(rect);
canvas.add(circle);

• javascript
• jquery
• canvas
• fabricjs

Share Improve this question Follow edited Apr 17, 2015 at 17:09 kangax 39.2k1313 gold badges100100 silver badges135135 bronze badges asked Mar 30, 2015 at 15:11 lillylilly 11122 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In FabricJS, the rectangle you are referring called the Border. On the corners of the border are smaller controls (squares) called the Controls that allow you to manipulate the object.

Both of these can be toggled on or off in the array of settings when you setup your object.

hasBorders

Default: true

When set to false, object's controlling borders are not rendered

hasControls

Default: true

When set to false, object's controls are not displayed and can not be used to manipulate object

So to remove both the borders and the controls, update your circle declaration to this:

var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac',
    hasControls: false,
    hasBorders: false
});

One other option would be to to modify the color of the Border.
borderColor

Default: "rgba(102,153,255,0.75)"

Color of controlling borders of an object (when it's active)

Styling of the Controls is through yet another option:

cornerColor

Default: "rgba(102,153,255,0.5)"

Color of controlling corners of an object (when it's active)

cornerSize

Default: 12

Size of object's controlling corners (in pixels)

EDIT:

Ok after looking at your JSFiddle, you are really asking how to use the jQuery canvas api. Can't help you there, but it looks like there are methods for moving/updating objects after they've been placed on a canvas.

The original answer (below) is for plain javascript on a plain canvas.

You don't. A single canvas doesn't have the concept of 'layers' or remember what objects were placed where.

You have a few options:

1) Repaint the canvas and this time don't draw the rectangle.

2) Draw two canvases layered on top of each other and toggle the visibility of the one containing the rectangle.

3) Draw a white rectangle on top of the rectangle you just drew (or whatever the background color is)

Option 1 is my preferred way. Option 2 is more plexity than you need, unless you're going to start creating a very plex image. Option 3 seems hacky and easy to break.

Regarding #1 - The painting of the canvas happens very, very fast, so it's safe to redraw the canvas several times per second (in the case of performing animation, e.g.,) without incurring much of a performance hit.