I'm new to canvas. How can I create ellipse shape in canvas using fabricjs?
(function() {
var canvas = this.__canvas = new fabric.StaticCanvas('canvas');
canvas.add(
new fabric.Rect({
top: 100,
left: 100,
width: 50,
height: 50,
fill: '#f55'
}),
new fabric.Circle({
top: 140,
left: 230,
radius: 75,
fill: 'green',
angle: 0
}),
//new fabric.Ellipse({ originX: 140, originY: 230, angle: 20, fill: 'green' }),
new fabric.Triangle({
top: 300,
left: 210,
width: 100,
height: 100,
fill: 'blue'
})
);
fabric.Image.fromURL('../lib/pug.jpg', function(img) {
canvas.add(img.set({
left: 400,
top: 350,
angle: 30
}).scale(0.25));
});
})();
This can be achieved by using the Fabric Ellipse class.
See below an example:
ellip = new fabric.Ellipse({
left: 50,
top: 50,
strokeWidth: 1,
stroke: 'black',
fill: 'white',
selectable: true,
originX: 'center',
originY: 'center',
rx: 5,
ry: 1
});
canvas.add(ellip);
You need to create an object of fabric.Ellipse and use properties rx: for horizontal radius and ry: for vertical radius of ellipse.
DEMO
var canvas = new fabric.Canvas('c');
var ellipse = new fabric.Ellipse({
left: 20,
top: 20,
rx: 150,
ry: 50,
fill: 'yellow'
});
canvas.add(ellipse);
canvas{
border : 2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
Related
How can I disable object selection outside of clipPath?
var canvas = new fabric.Canvas('c');
var clipath = new fabric.Rect({ width: 400, height: 300,left:50,fill: '#eee', absolutePositioned: true, selectable: false,hoverCursor: "default",strokeWidth: 0 });
var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red',left:80,top:20 });
rect.clipPath = clipath;
canvas.add(clipath);
canvas.add(rect);
<canvas id="c" width="600" height="350" style="border:1px solid #ccc"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
Recently I have started to use a newer version of Fabric.js (from 1.7.22 to 2.3.5). I had to make a few modifications to existing code that seem logical to me. However, I notice that you cannot initially place an object outside the canvas anymore, to reposition it later onto the canvas. Like in the code below. It won't show. My question is: has this changed for some reason, or is this an issue (bug)? And do I have other options than postpone adding the object to the canvas, or using the visible attribute?
$( document ).ready(() => {
const canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 301,
top: 10,
originX: 'left',
originY: 'top',
width: 50,
height: 50,
fill: '#336699'
});
canvas.add(rect);
rect.set({"left": 10});
rect.set({"top": 10});
canvas.renderAll();
});
canvas {
border: 1px solid tomato;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>
You need to use setCoords() after repositioning.
$( document ).ready(() => {
const canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
left: 301,
top: 10,
originX: 'left',
originY: 'top',
width: 50,
height: 50,
fill: '#336699'
});
canvas.add(rect);
rect.set({"left": 10});
rect.set({"top": 10});
rect.setCoords();
canvas.renderAll();
});
canvas {
border: 1px solid tomato;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="300" height="100"></canvas>
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
left:10,
top:10,
width:50,
height:50,
fill:'#4169e1'
}));
canvas.add(new fabric.Rect({
left:140,
top:140,
width:50,
height:50,
fill:'#800000'
}));
canvas {
border: black solid 1px;
padding: 5px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<input type='color'></input>
<canvas id="c" width="200" height="200"></canvas>
I want to be able to select an object and the input field updates with the color, AND be able to change the color of the object from the input field. I know I can do one way binding with document.getElementById("example").innerHTML and '<input type="color" value="' + canvas.getActiveObject().fill +'">', but what is the best way for two way binding?
You need to use events object:selected selection:cleared to get the selected object. And set the color picker value from selected object fill value.
DEMO
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#4169e1'
}));
canvas.add(new fabric.Rect({
left: 140,
top: 140,
width: 50,
height: 50,
fill: '#800000'
}));
var colorPick = document.getElementById('colorPick');
var activeSelected;
colorPick.onchange = function() {
if (activeSelected) {
activeSelected.fill = this.value;
activeSelected.dirty = true;
canvas.renderAll();
}
};
canvas.on('object:selected', function(option) {
activeSelected = option.target;
colorPick.value = activeSelected.fill;
})
canvas.on('selection:cleared', function(option) {
activeSelected = null;
console.log(activeSelected)
});
canvas {
border: black solid 1px;
padding: 5px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<input type='color' id='colorPick'></input>
<canvas id="c" width="200" height="200"></canvas>
I've a problem with my FabricJS app. By default, the object layer in fabricjs jumps to the top when I select it.
I want to disable this option so that the index of the active element not changing. It's possible ?
You just need to set the preserveObjectStacking options as shown in the below code when setting up the canvas.
var fabricCanvas = new fabric.Canvas("t", { preserveObjectStacking: true });
fabricCanvas
.add(new fabric.Rect({
top: 0,
left: 0,
width: 100,
height: 100,
fill: "green"
}))
.add(new fabric.Rect({
top: 50,
left: 50,
width: 100,
height: 100,
fill: "red"
}))
.add(new fabric.Rect({
top: 100,
left: 100,
width: 100,
height: 100,
fill: "blue"
}))
.renderAll();
canvas {
border: 1px solid black;
}
<canvas id="t" width="400" height="300"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
In native HTML5 canvas the text is positioned by the text baseline but in Fabric.js it seems to be by the bottom of the text. I want Fabric.js to position text by the baseline. Is it possible?
See image
This is the code used for the example.
Fabric.js<br />
<canvas id="fabric" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script src="fabric.js"></script>
<script>
var canvas = new fabric.Canvas('fabric');
canvas.add(new fabric.Line([100, 100, 200, 100], { left: 10, top: 50, stroke: 'red' }));
canvas.add(new fabric.Text('Hello World', { left: 10, top: 50, originY: 'bottom', useNative: true, fontSize: 50 }));
</script>
<br />
Native HTML5<br />
<canvas id="native" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("native");
var ctx = c.getContext("2d");
ctx.font = "50px Times New Roman";
ctx.fillText("Hello World",10,50);
ctx.moveTo(10,50);
ctx.lineTo(100,50);
ctx.strokeStyle = '#ff0000';
ctx.stroke();
</script>
Unfortunately, it doesn't look possible at the moment. The textBaseline attribute is set to 'alphabetic' and the only available vertical alignment options are 'top', 'center', & 'bottom' (which are relative to the bounding box fabric draws around the text).
I've created an issue to request this feature. Hopefully, they add it!