Develop Reference

Canvas issue with fabric.IText

I'm working on project for Canvas editor.I have this issue :User can add text and edit it in canvas but when delete first text and try to put again text,new text can't be edit.I use fabricjs.
For add text i use this code.
$("#addText").on("click", function addText() {
var oText = new fabric.IText('Tap and Type', {
left: 100,
top: 100,
fontSize: 26,
});
oText.set({ fill: $(".addText-options .sp-preview-inner").css("background-color") });
oText.id = 'userDesign';
canvas.add(oText).renderAll().setActiveObject(oText);
activeObject = canvas.getActiveObject();
});

I found the solution.The problem was in version of fabricjs i used i just change version.

FabricJS adding Image to Group causes odd control behavior

I'm attempting to add a loaded image into a fabric Group object. Everything looks ok, but the selection controls aren't selectable and I can't drag the object around. The top left control works though and after clicking it everything is fine.
Here is a jsfiddle that demonstrates the behavior.
var canvas = new fabric.Canvas('canvas', {
width: 200,
height: 200
});
var group = new fabric.Group();
canvas.add(group);
fabric.Image.fromURL('https://placehold.it/100x100', function(img) {
group.addWithUpdate(img);
canvas.setActiveObject(group);
canvas.renderAll();
});
Is this a bug or am I doing something wrong?

For some performance reason, fabricjs does not call setCoords automatically after adding objects to a group ( in case of many object added you can call setCoords just once ).
So after doing addWithUpdate, just call group.setCoords();
var canvas = new fabric.Canvas('canvas', {
width: 200,
height: 200
});
var group = new fabric.Group();
canvas.add(group);
fabric.Image.fromURL('https://placehold.it/100x100', function(img) {
group.addWithUpdate(img);
group.setCoords();
canvas.setActiveObject(group);
canvas.renderAll();
});

I came across this post because I was having trouble getting the positioning of images to work properly. I ended up finding that it's easier to just create create an image element using document.createElement and set the src, then feed that into fabric.Image with all the options you need (instead of using fabric.Image.fromURL which was too much of a headache to use), before adding it to the group.
var oImg = document.createElement("img");
oImg.setAttribute('src', 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Cog_font_awesome.svg/512px-Cog_font_awesome.svg.png');
var i = new fabric.Image(oImg, {
originX: 'center',
originY: 'center',
left: left+35,
top: top-30,
scaleX:.05,
scaleY:.05,
});
g = new fabric.Group([r, t, i]); // where r and t are other fabric objects

Adding filter to pattern image of shape in fabric.js

I am trying to apply a filter to the pattern image of shape but receiving numerous errors. I googled a lot but still cannot find a solution that works. Below is my code. Q 1. Is it even possible? Q 2. How to achieve it!?
var canvas = new fabric.Canvas('c1');
var circle = new fabric.Circle({
radius: 100, fill: 'green', left: 100, top: 100
});
canvas.add(circle);
loadPattern('http://i0.wp.com/www.illustratoring.com/wp-content/uploads/2012/12/chevron-pattern-illustrator.png?resize=40%2C40', circle);
function loadPattern(url, obj){
fabric.util.loadImage(url, function(img) {
obj.setPatternFill({
source: img,
repeat: 'repeat'
});
canvas.renderAll();
});
}
here is the JSfilddle https://jsfiddle.net/eepmzy9n/2/ I want to apply filters to the pattern image.

Yes, this should be possible using the fabric js filters. Combining patterns and filters shouldn't be an issue.
Info on image filters:
http://fabricjs.com/fabric-intro-part-2/#image_filters
http://fabricjs.com/image-filters/
Other code examples using filters:
Fabric js image filter
How to apply filter to canvas backgroundImage in Fabric.js

How to add image with Raphael JS?

Hi here's my Raphael js to create some rectangles on a map svg
var rsr = Raphael('map', '600', '600');
var houses = [];
var houses_a = rsr.rect(433.6, 29.4, 100, 100);
houses_a.attr({x: '433.6',y: '29.4',fill: '#FFFFFF',stroke: '#000000',"stroke-width": '5',"stroke-miterlimit": '10','stroke-opacity': '1'}).data({'id': 'houses_a', 'house': 'House A'});
houses.push(houses_a);
i can change the color of the rectangle by
houses_a.node.setAttribute('fill', "red");
but when try to do
houses_a.node.setAttribute('fill', "apple.png");
or
houses_a.node.setAttribute('src', "apple.png");
it won't work.
Is there any other ways?

I'm not quite sure why you are using element.node.setAttribute rather than element.attr(); There are sometimes reasons, but not sure from the above.,
It depends what you are actually trying to do, it would help if there was a jsfiddle of what you want.
You could use this for example...to create a rect/image
var p = Raphael("paper", 800,800);
var img = p.image("http://svg.dabbles.info/tux.png", 10, 10, 300, 300)
.attr({ "clip-rect": "20,20,300,300" });
jsfiddle

Creating WordArt text effects -FabricJs

I am using fabricJs to create wordArts where one can scale, rotate, transform the texts.
The approach would be rotate and skew every character in text at a certain angle.
I am using Itext class of fabric to style each character
here is what I have done but it isn't working.
var canvas = new fabric.Canvas('c')
var text= "Test fabricJs"
var comicSansText = new fabric.IText(text, {
fontFamily: 'Comic Sans',
left: canvas.width/4, top: canvas.width/2 ,
stroke: '#ff1318',
strokeWidth: 1,
strokeStyle:"#fff",
styles:[[{"fill": "red",
"fontSize": 20,
"angle":30,
"transform":"rotate(30deg)"}]]
});
Refer fiddle here http://jsfiddle.net/swesh/c7s9x2fh/

To enable Curved text, you've to add fabric.CurvedText.js.
Download fabric.CurvedText.js
After that, you can set the angle.
Its working for me.