Develop Reference

Problem with FabricJS TextBox can't select and edit value & Layer Index is not working correctly

I have a problem with Fabric Text Box: user can't select TextBox & edit value. And using function canvas.MoveTo to set image of cloud to index 2 & Text Box to index 7, I expect TextBox is above Image, but actually, the Text box is always display behind the cloud image.
Here is my code
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
img.left = 0.2;
img.top = 54.94981;
canvas.add(img);
canvas.moveTo(img, 2);
canvas.renderAll();
});
var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
left: 0,
top: -14.620352,
width: 169.598436,
fontSize: 19.3302,
fontFamily: 'Nunito-Bold',
fill: "#000000",
editable: true,
});
textbox7.editable = true;
canvas.add(textbox7);
canvas.moveTo(textbox7, 7);
textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>

For moveTo index, better choose a number between 0 and number of object present in canvas.
And as I see you are changing left and top using tansformMatrix, so just set left and top to the object.
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.setBackgroundImage('https://futushigame.firebaseapp.com/Background.svg', canvas.renderAll.bind(canvas), {
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
fabric.Image.fromURL("https://futushigame.firebaseapp.com/group5.svg", function(img) {
img.left = 0.2;
img.top = 54.94981;
canvas.add(img);
canvas.moveTo(img, 0);
canvas.renderAll();
});
var textbox7 = new fabric.Textbox("LITTLE PRINCESS", {
left: 64.7895,
top: 154.4856948,
width: 169.598436,
fontSize: 19.3302,
fontFamily: 'Nunito-Bold',
fill: "#000000",
editable: true,
});
canvas.add(textbox7);
canvas.moveTo(textbox7, 1);
//textbox7.transformMatrix = [1, 0, 0, 1, 64.7895, 169.1073];
textbox7.setCoords();
canvas.renderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>

FabricJS on('object:selected') doesn't trigger consistently for lines

I am currently building a simple line drawing tool using FabricJs and canvas.
DRAW mode: Draw lines using the mouse
DELETE mode: Click anywhere a line to delete it. Using the fabric js on('object:selected')
My issue is that DELETE mode is inconsistent,
Clicking on the top half deletes the line, clicking on the bottom half doesn't do anything.
Am I missing something? I have tried everything.
Thanks for the help.
EDIT: ADDED snippet
var isDrawing = true;
var canvas = new fabric.Canvas('a', {
selection: false
});
var grid = 30;
// create grid
//line
var line, isDown;
function createGrid(board) {
for (var i = 0; i < (600 / grid); i++) {
board.add(new fabric.Line([i * grid, 0, i * grid, 600], {
stroke: '#000',
selectable: false
}));
board.add(new fabric.Line([0, i * grid, 600, i * grid], {
stroke: '#000',
selectable: false
}))
}
}
//create grids
createGrid(canvas);
//Button Toggle
$("#draw").click(function() {
isDrawing = true;
DrawLine(canvas);
});
$("#erase").click(function() {
isDrawing = false;
EraseLine(canvas);
});
function DrawLine(board) {
// add objects
board.on('mouse:down', function(o) {
isDown = true;
var pointer = board.getPointer(o.e);
var points = [Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 5,
strokeDashArray: [5, 10],
strokeLineCap: 'round',
fill: '#005E7A',
stroke: '#005E7A',
originX: 'center',
originY: 'center',
hasControls: 'false',
hasRotatingPoint: 'false',
padding: 50,
///perPixelTargetFind: true,
lockMovementX: true,
lockMovementY: true,
});
line.setOptions({
'selectable': false
});
board.add(line);
});
board.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = board.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
board.renderAll();
});
board.on('mouse:up', function(o) {
var pointer = board.getPointer(o.e);
isDown = false;
line.set({
x2: Math.round(pointer.x / grid) * grid,
y2: Math.round(pointer.y / grid) * grid
});
board.renderAll();
});
}
function EraseLine(board) {
board.off();
line.setOptions({
'selectable': true
});
var eraseHandler = function(o) {
console.log(o);
board.remove(o.target);
};
board.on('object:selected', eraseHandler);
board.renderAll();
}
canvas {
background-color: transparent;
margin: 3px;
width: 120px;
height: 240px;
border: 2px solid #ccc;
padding-left: 0;
}
.boards {
display: inline;
padding-left: 0;
}
.boards canvas {
list-style: none;
display: inline-block;
background-color: transparent;
margin: 3px;
width: 120px;
height: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<h1>Fabric Js On selected mode </h1>
<div class="boards">
<canvas id="a" width="120" height="240"></canvas>
<br>
<button id="draw">
Draw MOde
</button>
<button id="erase">
Erase Mode
</button>

var isDrawing = true;
var canvas = new fabric.Canvas('a', {
selection: false
});
var grid = 30;
// create grid
//line
var line, isDown;
function createGrid(board) {
for (var i = 0; i < (600 / grid); i++) {
board.add(new fabric.Line([i * grid, 0, i * grid, 600], {
stroke: '#000',
selectable: false
}));
board.add(new fabric.Line([0, i * grid, 600, i * grid], {
stroke: '#000',
selectable: false
}))
}
}
//create grids
createGrid(canvas);
//Button Toggle
$("#draw").click(function() {
isDrawing = true;
DrawLine(canvas);
});
$("#erase").click(function() {
isDrawing = false;
EraseLine(canvas);
});
function DrawLine(board) {
canvas.forEachObject(function(obj){
obj.selectable = false;
})
// add objects
board.on('mouse:down', function(o) {
isDown = true;
var pointer = board.getPointer(o.e);
var points = [Math.round(pointer.x / grid) * grid, Math.round(pointer.y / grid) * grid, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 5,
strokeDashArray: [5, 10],
strokeLineCap: 'round',
fill: '#005E7A',
stroke: '#005E7A',
originX: 'center',
originY: 'center',
hasControls: 'false',
hasRotatingPoint: 'false',
padding: 50,
///perPixelTargetFind: true,
lockMovementX: true,
lockMovementY: true,
selectable: false
});
board.add(line);
});
board.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = board.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
board.renderAll();
});
board.on('mouse:up', function(o) {
var pointer = board.getPointer(o.e);
isDown = false;
line.set({
x2: Math.round(pointer.x / grid) * grid,
y2: Math.round(pointer.y / grid) * grid
});
line.setCoords();
board.renderAll();
});
}
function EraseLine(board) {
board.off();
line.setOptions({
'selectable': true
});
canvas.forEachObject(function(obj){
obj.selectable = true;
})
canvas.renderAll();
var eraseHandler = function(o) {
board.remove(o.target);
};
board.on('object:selected', eraseHandler);
}
canvas {
background-color: transparent;
margin: 3px;
width: 120px;
height: 240px;
border: 2px solid #ccc;
padding-left: 0;
}
.boards {
display: inline;
padding-left: 0;
}
.boards canvas {
list-style: none;
display: inline-block;
background-color: transparent;
margin: 3px;
width: 120px;
height: 240px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<h1>Fabric Js On selected mode </h1>
<div class="boards">
<canvas id="a" width="120" height="240"></canvas>
<br>
<button id="draw">
Draw MOde
</button>
<button id="erase">
Erase Mode
</button>
use line.setCoords(); to set coordinate after setting line points.

JavaScript - Dynamically create SVG and modify for cursor

Say I have a HTML5 canvas (In this case using fabric.js), and I want to change the cursor over the canvas to represent whatever brush size and colour has been selected. I'm thinking there should be a way to do this by changing an SVG's properties (size & colour) dynamically with JS so we don't have to use multiple images. Any ideas on if this is possible?
var canvas = new fabric.Canvas(c, {
isDrawingMode: true,
freeDrawingCursor: 'url("img/cursor.svg"), auto'
});

I think freeDrawingCursor is just looking for normal css property names. Here is an example of how to have a fabric object represent the cursor size and color:
var canvas = new fabric.Canvas('c', {
isDrawingMode: true,
freeDrawingCursor: 'none'
});
canvas.freeDrawingBrush.width = 10;
canvas.freeDrawingBrush.color = '#9f9';
var mousecursor = new fabric.Circle({
left: 0,
top: 0,
radius: canvas.freeDrawingBrush.width / 2,
fill: canvas.freeDrawingBrush.color,
originX: 'right',
originY: 'bottom',
})
canvas.add(mousecursor);
canvas.on('mouse:move', function(obj) {
mousecursor.top = obj.e.y - mousecursor.radius;
mousecursor.left = obj.e.x - mousecursor.radius;
canvas.renderAll()
})
canvas.on('mouse:out', function(obj) {
// put circle off screen
mousecursor.top = -100;
mousecursor.left = -100;
canvas.renderAll()
})
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

Existing answers didn't work for me in 2020. Try the following:
this.canvas.isDrawingMode = true;
this.canvas.freeDrawingCursor = 'none';
const mousecursor = new fabric.Circle({
left: 0,
top: 0,
radius: this.canvas.freeDrawingBrush.width / 2,
fill: this.canvas.freeDrawingBrush.color,
originX: 'right',
originY: 'bottom',
});
this.canvas.add(mousecursor);
// Cursor in canvas
this.canvas.on('mouse:move', event => {
mousecursor.top = event.e.layerY + mousecursor.radius;
mousecursor.left = event.e.layerX + mousecursor.radius;
this.canvas.renderAll();
});
// Cursor out of canvas
this.canvas.on('mouse:out', event => {
mousecursor.top = -100;
mousecursor.left = -100;
this.canvas.renderAll();
});
Worked fine with Angular 7.

I was looking for the same and found my way to this question. Unfortunately the solution by STHayden is not working for me. So I've modified it a bit and came up with the code below. It uses two canvas layers, the bottom for drawing, the top for the "cursor". Works pretty well for me now, maybe someone will find it helpful :)
//drawing layer
var canvas = new fabric.Canvas("draw", {
isDrawingMode: true,
freeDrawingCursor: 'none'
});
//mouse cursor layer
var cursor = new fabric.StaticCanvas("cursor");
canvas.freeDrawingBrush.width = 20;
canvas.freeDrawingBrush.color = '#ff0000';
var cursorOpacity = .5;
//create cursor and place it off screen
var mousecursor = new fabric.Circle({
left: -100,
top: -100,
radius: canvas.freeDrawingBrush.width / 2,
fill: "rgba(255,0,0," + cursorOpacity + ")",
stroke: "black",
originX: 'center',
originY: 'center'
});
cursor.add(mousecursor);
//redraw cursor on new mouse position when moved
canvas.on('mouse:move', function (evt) {
var mouse = this.getPointer(evt.e);
mousecursor
.set({
top: mouse.y,
left: mouse.x
})
.setCoords()
.canvas.renderAll();
});
//put cursor off screen again when mouse is leaving
canvas.on('mouse:out', function () {
mousecursor
.set({
top: mousecursor.originalState.top,
left: mousecursor.originalState.left
})
.setCoords()
.canvas.renderAll();
});
//while brush size is changed show cursor in center of canvas
document.getElementById("size").oninput = function () {
var size = parseInt(this.value, 10);
mousecursor
.center()
.set({
radius: size/2
})
.setCoords()
.canvas.renderAll();
};
//after brush size has been changed move offscreen, update brush size
document.getElementById("size").onchange = function () {
var size = parseInt(this.value, 10);
canvas.freeDrawingBrush.width = size;
mousecursor
.set({
left: mousecursor.originalState.left,
top: mousecursor.originalState.top,
radius: size/2
})
.setCoords()
.canvas.renderAll();
};
//change mousecursor opacity
document.getElementById("opacity").onchange = function () {
cursorOpacity = this.value;
var fill = mousecursor.fill.split(",");
fill[fill.length-1] = cursorOpacity + ")";
mousecursor.fill = fill.join(",");
};
//change drawing color
document.getElementById("color").onchange = function () {
canvas.freeDrawingBrush.color = this.value;
var bigint = parseInt(this.value.replace("#", ""), 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
mousecursor.fill = "rgba(" + [r,g,b,cursorOpacity].join(",") + ")";
};
#cont {
position: relative;
width: 500px;
height: 500px;
}
canvas {
border: 1px solid;
}
#cont canvas, .canvas-container {
position: absolute!important;
left: 0!important;
top: 0!important;
width: 100%!important;
height: 100%!important;
}
#cursor {
pointer-events: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
Color: <input id="color" type="color" value="#ff0000"><br/>
Brush size: <input id="size" type="range" min="1" max="100" step="1" value="20"><br/>
Brush opacity: <input id="opacity" type="number" min="0" max="1" step="0.1" value="0.5"><br/>
<div id="cont">
<canvas id="draw" width="500" height="500"></canvas>
<canvas id="cursor" width="500" height="500"></canvas>
</div>

Deselecting mouse event 'mouse:down' after initial event has been rendered

I am very new to fabric.js, but I am learning quickly.
I have a few items that, when clicked, will fill with the color red.
My problem lies with clicking the image again to reset only that image back to default (black).
Can someone explain how to achieve this?
canvas.on('mouse:down', function(e) {
e.target.setFill('red');
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;
canvas.deactivateAll().renderAll();
});
Please see the JSFIDDLE for the full example code

Look at the if statement below. It detects the current color and switches it:
(function(){
var canvas = new fabric.Canvas('c4');
canvas.hoverCursor = 'default';
canvas.on('mouse:down', function(e) {
var color = e.target.fill;
if(color == '#000')
{
e.target.setFill('red');
} else {
e.target.setFill('#000');
}
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;
canvas.deactivateAll().renderAll();
});
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 200 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 150 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 100 }));
})();

Look at this Fiddle : http://jsfiddle.net/hpyrk05w/3/
it is so simple :
you have to check on mouse down if current fill of object is what?
if current fill is red than fill it with black color and if not, than fill it with red color
(function(){
var canvas = new fabric.Canvas('c4');
canvas.hoverCursor = 'default';
canvas.on('mouse:down', function(e) {
if(e.target.getFill()=="red")
e.target.setFill('black');
else
e.target.setFill('red');
e.target.lockMovementX = e.target.lockMovementY = true;
e.target.lockScalingX = e.target.lockScalingY = true;
e.target.lockUniScaling = true;
canvas.deactivateAll().renderAll();
});
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 200 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 150 }));
canvas.add(new fabric.Circle({ radius: 10, fill: '#000', top: 100, left: 100 }));
})();
pre { margin-left: 15px !important }
canvas{border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c4" width="450" height="500"></canvas>

Kineticjs dragBoundFunc for a rect in a rect

i have following code to drag a smaller rect in a bigger rect.
it is almost working, but its possible to move the orange rect out of the white one.
Is there any solution for this behavior?? that the bigger rect is the dragborder for the small rect??
And another question... would it be possible to do it for a rect in any polygon as border?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {margin: 0px; padding: 20px;}
canvas {border: 1px solid #777;}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.2.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Kinetic.Layer();
// White box
var white = new Kinetic.Rect({
x: 100,
y: 50,
width: 150,
height: 100,
fill: 'white',
stroke: 'black',
strokeWidth: 2
});
// orange box
var orange = new Kinetic.Rect({
x: 150,
y: 100,
width: 50,
height: 30,
fill: 'orange',
stroke: 'black',
strokeWidth: 2,
draggable: true,
// this causes orange box to be stopped if try to leave white box
dragBoundFunc: function(pos){
if(theyAreColliding(orange,white)){
// orange box is touching white box
// let it move ahead
return ({ x:pos.x, y:pos.y });
} else{
// orange box is not touching white box
// don't let orange box move outside
if (white.getY() > orange.getY()){
return({x: pos.x, y: white.getY()+1});
}
else if (white.getY() + white.getHeight() - orange.getHeight() < orange.getY()){
return({x: pos.x, y: white.getY() + white.getHeight() - orange.getHeight() -1});
}
else if (white.getX() > orange.getX()){
return({x: white.getX() +1, y: pos.y})
}
else if (white.getX() + white.getWidth() - orange.getWidth() < orange.getX()){
return({x: white.getX() +white.getWidth() - orange.getWidth() -1, y: pos.y})
}
}
}
});
function theyAreColliding(rect1, rect2) {
return !(rect2.getX() > rect1.getX() ||
rect2.getX() + rect2.getWidth() - rect1.getWidth() < rect1.getX() ||
rect2.getY() > rect1.getY() ||
rect2.getY() + rect2.getHeight() - rect1.getHeight() < rect1.getY());
}
layer.add(white);
layer.add(orange);
stage.add(layer);
</script>
</body>
</html>
and also the jsfiddle link: http://jsfiddle.net/dNfjM/

This is an improved way of setting your dragBoundFunc
The secret with dragBoundFunc is to allow it to execute fast. Remember that it is being executed with every mousemove.
So, pre-calculate all the minimum and maximum boundaries before and outside dragBoundFunc, like this:
// pre-calc some bounds so dragBoundFunc has less calc's to do
var height=orangeRect.getHeight();
var minX=white.getX();
var maxX=white.getX()+white.getWidth()-orangeRect.getWidth();
var minY=white.getY();
var maxY=white.getY()+white.getHeight()-orangeRect.getHeight();
That way your dragBoundFunc can just test the current position against these pre-calc’ed bounds like this:
dragBoundFunc: function(pos) {
var X=pos.x;
var Y=pos.y;
if(X<minX){X=minX;}
if(X>maxX){X=maxX;}
if(Y<minY){Y=minY;}
if(Y>maxY){Y=maxY;}
return({x:X, y:Y});
}
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/n5xMs/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 10px;
}
canvas{border:1px solid red;}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
var white = new Kinetic.Rect({
x: 20,
y: 20,
width: 300,
height: 300,
fill: 'white',
stroke: 'black',
strokeWidth: 2
});
var orangeGroup = new Kinetic.Group({
x: stage.getWidth() / 2,
y: 70,
draggable: true,
dragBoundFunc: function(pos) {
var X=pos.x;
var Y=pos.y;
if(X<minX){X=minX;}
if(X>maxX){X=maxX;}
if(Y<minY){Y=minY;}
if(Y>maxY){Y=maxY;}
return({x:X, y:Y});
}
});
var orangeText = new Kinetic.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'boxed in',
fill: 'black',
padding: 10
});
var orangeRect = new Kinetic.Rect({
width: orangeText.getWidth(),
height: orangeText.getHeight(),
fill: 'orange',
stroke: 'blue',
strokeWidth: 4
});
orangeGroup.add(orangeRect).add(orangeText);
layer.add(white);
layer.add(orangeGroup);
stage.add(layer);
// pre-calc some bounds so dragBoundFunc has less calc's to do
var height=orangeRect.getHeight();
var minX=white.getX();
var maxX=white.getX()+white.getWidth()-orangeRect.getWidth();
var minY=white.getY();
var maxY=white.getY()+white.getHeight()-orangeRect.getHeight();
</script>
</body>
</html>