Develop Reference

How to get the center point of canvas

How to get The center point of the canvas object/rectangle. I use the Konvajs library for my small project. in the konva documentation said that you need to center the point to get good rotation.
http://konvajs.github.io/docs/animations/Rotation.html
Ex
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: 100,
height: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: 50 // how to solve this using formula so it will dynamic,
y: 25 // how to solve this using formula so it will dynamic
}
});

Rotating rectangular objects around their centers
By default, KonvaJS sets the rotation point of a rectangle at its top-left corner. Therefore to rotate from the center of the rectangle you must push the rotation point to the center of the rectangle.
You can do this by setting the offsetX=rectangleWidth/2 and offsetY=rectangleHeight/2
var yellowRectWidth=100;
var yellowRectHeight=50;
var yellowRect = new Konva.Rect({
x: 220,
y: 75,
width: yellowRectWidth,
height: yellowRectHeight,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
offset: {
x: yellowRectWidth/2,
y: yellowRectHeight/2
}
});
Rotating circular objects around their centers
By default, KonvaJS sets the rotation point of circular shapes at their centerpoints. Therefore to rotate from the center of circular shapes you won't have to set any offsets.

Text color overlay in FabricJS

I am trying to create an effect in FabricJS, where the color of some text I am adding to my canvas is determined by a texture. Should be easy, but when I apply the texture as a pattern, I cannot work out the combination of scale, rotation etc that I need to make it work. It appears to me like the pattern is being applied 'local' to the object, so (0,0), is the object's top left coords, rather than that of the overall image.
So if here's my text color texture,
and I placed some text in the middle, the effect I want would be this:
I've tried various things with static canvas etc, but I've hit a dead end. Please can someone help? Here's my current attempt:
var patternSourceCanvas = new fabric.StaticCanvas();
oImg.setAngle(-angles[i]);
patternSourceCanvas.add(oImg);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: oImg.getWidth(),
height: oImg.getHeight()
});
return patternSourceCanvas.getElement();
},
repeat: 'no-repeat'
});
var text = new fabric.Text(entry, {
originX: 'center',
originY: 'center',
left: (coords[i][0] * bufWidth),
top: (coords[i][1] * bufHeight),
fill: pattern,
centeredRotation: true,
angle: angles[i],
fontFamily: 'Kapra',
fontSize: 42
});
Huge thanks in advance!

i got this idea, you can obtain the effect using the globalCompositeOperation property of fabricJs objects
// clear canvas
canvas.clear();
var text = new fabric.Text('AAAAA', {
originX: 'center',
originY: 'center',
left:30,
top: 30,
fill: 'rgba(0,0,0,1)',
centeredRotation: true,
angle: 20,
fontSize: 100,
});
canvas.add(text);
fabric.Image.fromURL('../assets/pug.jpg', function(oImg) {
oImg.globalCompositeOperation = 'source-atop';
oImg.width = canvas.width;
oImg.heigth = canvas.height;
canvas.add(oImg);
var rect = new fabric.Rect({
width: 200,
height: 200,
globalCompositeOperation: 'destination-over',
fill: 'black'
});
canvas.add(rect);
});
So basically you render the text in any color, black.
Then you render the color image OVER the text, covering all the canvas, specifying globalCompositeOperation = 'source-atop'
After this you have a colored text on a white background.
To have a black background now draw a rect big as the canvas, but specify globalCompositeOperation = 'destination-over'
So you will do something totally different but it will work.
May need tweaking and may not fit your needs. But it should show the example you posted.

Place an Image inside a Polygon with Snap.svg

I have a polygon (in fact it's a hexagon) painted with Adobe's Snap.svg:
var s = Snap('#test');
var hexagon = s.paper.polygon([
0, 50,
50, 0,
100, 0,
150, 50,
100, 100,
50, 100,
0, 50
]);
hexagon.attr({
stroke: '#fff',
strokeWidth: 1
});
Instead of filling the polygon with some paint, I want to place an image inside of it. The only thing I have found in the docs is the image function, but I don't know how to insert it. Anyone any idea?
======
Final Solution:
var image = s.paper.image('http://placekitten.com/g/200/300', 0, 0, 150, 150);
image = image.pattern(0, 0, 150, 150);
...
hexagon.attr({
stroke: '#fff',
strokeWidth: 1,
fill: image
});

You can't directly fill an element with an image you have to go via a pattern.
What this means is that you need to create a pattern that contains an image and then fill the shape with the pattern.

Fabric.js Clip Canvas (or object group) To Polygon

I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area.
Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt.
I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles.
Thanks

You can just render a shape inside canvas.clipTo :)
I just loaded a random SVG shape in kitchensink and did this:
var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
As you can see, entire canvas is now clipped by that SVG shape.

You may also try this one: http://jsfiddle.net/ZxYCP/198/
var clipPoly = new fabric.Polygon([
{ x: 180, y: 10 },
{ x: 300, y: 50 },
{ x: 300, y: 180 },
{ x: 180, y: 220 }
], {
originX: 'left',
originY: 'top',
left: 180,
top: 10,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
You can simply use Polygon to clip. Answer is based on #natchiketa idea in this question Multiple clipping areas on Fabric.js canvas

kineticjs rect fillText

I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru

I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/

Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.