Develop Reference

Change Color of Shape Mid Tween

I'm trying to make an event that changes my shapes stroke color for 5 seconds when a button is clicked, and then the shape returns to original color after the duration.
I am able to do this with clearing the entire stage and redrawing new shapes (which resets their position), but I can't figure it out with the current shapes.
Q. What's the best way to approach making a change to a shapes color, during a Tween?
I was also curious if there's a better way to handling tweening the shapes width? Currently I am relying on ScaleX and ScaleY - but this also changes the stroke's size - which is not desired.
JS Fiddle
HTML
<button id="change">Click to Change Color</button>
<canvas id="demoCanvas" width="500" height="500"></canvas>
JS
var stage,
circle;
function init() {
stage = new createjs.Stage("demoCanvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", stage);
}
function createCircle(){
circle = new createjs.Shape().set({name:"circle"});
circle.graphics.setStrokeStyle(1).beginStroke("#000").beginFill( "#FFF" ).drawCircle(0, 0, 20);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
createjs.Tween.get(circle, {loop: true})
.to({x: 225, y: 225}, 1000, createjs.Ease.getPowInOut(1))
.to({x: 100, y: 100}, 1000, createjs.Ease.getPowInOut(1));
circle2 = new createjs.Shape().set({name:"circle"});
circle2.graphics.setStrokeStyle(1).beginStroke("#000").beginFill( "#FFF" ).drawCircle(0, 0, 20);
circle2.x = 400;
circle2.y = 400;
stage.addChild(circle2);
createjs.Tween.get(circle2, {loop: true})
.to({scaleX: 2, scaleY: 2, x: 425, y: 125}, 1000, createjs.Ease.getPowInOut(1))
.to({scaleX: 1, scaleY: 1, x: 400, y: 400}, 1000, createjs.Ease.getPowInOut(1));
stage.update();
}
$( "#change" ).click(function() {
// change color
});
$(document).ready(function() {
init();
createCircle();
});

There are a few questions in this post, so I will try to answer them all:
First, a solution to most of your issues is Graphic commands. Commands provide a simple way to store graphic instructions, and change them later. Here is a simple example:
var shape = new createjs.Shape();
var colorCmd = shape.graphics.beginFill("red").command;
var rectCmd = shape.graphics.drawRect(0,0,100,100).command;
// Later
colorCmd.style = "blue";
rectCmd.w = 200;
stage.update(); // Remember to update the stage after changing properties
You can read more about commands on the createjs blog. All commands and their properties are documented in the EaselJS docs.
Change a color: I outlined this in the example above, but the short answer is to adjust the style property of a fill command. If you want to change it instantly, you can just set up a Tween.call:
Example:
createjs.Tween.get(circle, {loop: true})
.to({x: 225, y: 225}, 1000, createjs.Ease.getPowInOut(1))
.call(function(tween) {
colorCmd.style = "rgba(0, 0, 255, 0.5)"; // Change to 50% blue
})
.to({x: 100, y: 100}, 1000, createjs.Ease.getPowInOut(1));
If you want to tween the color, then you could check out the ColorPlugin, which is currently in a "Plugins" branch of TweenJS: https://github.com/CreateJS/TweenJS/tree/Plugins/extras/plugins
// Tween the color from its current value to blue.
// Note that only hex, short hex, HSL, and RGB formats are supported.
createjs.Tween.get(colorCmd).to({style:"#0000ff"});
Change the size: The example above also shows how to modify the values of a drawRect call. You can do the same with any other draw command (including moveTo, lineTo, polyStar, etc).
Scaling also works, and if you want to not scale the stroke, just set the ignoreScale parameter on the stroke style.
shape.graphics.setStrokeStyle(1, null, null, null, true);

How to draw an arc with fabric.js?

I want to draw an arc and I'm using a circle with a start and an end angle for this. But something is wrong. Here is my code for this:
var circle = new fabric.Circle({
radius: 30,
left: 20,
top: 20,
fill: "rgba(0, 0, 0, 0)",
stroke: 'black',
startAngle: 0,
endAngle: Math.PI
});
canvas.add(circle);
You can see (on jsfiddle) it always draws a complete circle — http://jsfiddle.net/tfn1772f/
What is wrong?

What about drawing an arc via fabric.Path? Try something like this:
var arc1 = new fabric.Path("M 255 135 A 50 50 0 0 1 200 110", {
stroke: 'black',
fill: "white"
});
Also see: https://groups.google.com/forum/#!msg/fabricjs/fp19BLlqauw/a-smtqe5ms8J
You could write a function that accepts params and generates the path. Looks like fabric also has a static function in fabric.util.drawArc which you could use:
http://fabricjs.com/docs/fabric.util.html#drawArc

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.

How to distort the figure by Raphael's matrix transform?

I want to learn the basic usage of matrix transform of Raphael.
So I've write following code which will distort a simple rectangle :
var rect = paper.rect(50, 50, 150, 200);
rect.attr({"fill":"#0ff", "stroke":"#000", "stroke-width":2.0});
var mtx = Matrix.add(1, -0.5, 0, 1, 0, 0);
var mts = mtx.toTransformString();
rect.attr("transform", mts);
Rectangle is appeared but no change has happened on the figure.
What should I do ?

It's simpler than you think...
var rect = paper.rect(50, 50, 150, 200);
rect.attr({"fill":"#0ff", "stroke":"#000", "stroke-width":2.0});
rect.transform(['m', 1, -0.5, 0, 1, 0, 0]);

shape intersection with KineticJS

I want to show only intersection of two shape by using KineticJS.
How can I do this?
I tried to do it like following link.
HTML5 Canvas Clipping Region. Is have any other way?

You can use the globalCompositeOperation to do this: http://jsfiddle.net/wbzwX/
ctx.fillStyle="#000";
ctx.fillRect(50,50,100,100);
ctx.globalCompositeOperation = "source-in";
// this will use the fillstyle of the next drawn object.
// "destination-in" will use the previous fillstyle.
ctx.beginPath();
ctx.arc(100,50,30,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle="#f00";
ctx.fill();​

I have created the solution based on Shmi.
function makeShapeComposite(shape, operation) {
shape.attrs._drawFunc = shape.attrs.drawFunc;
shape.attrs.drawFunc = function (context) {
context.save();
context.globalCompositeOperation = operation;
this.attrs._drawFunc.call(this, context);
context.restore();
};
return shape;
};
var pol= makeShapeComposite(new Kinetic.RegularPolygon({
x: 250,
y: 100,
sides: 4,
radius: 70,
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 2
}), "destination-in");
Fiddle:http://jsfiddle.net/sara9/2v7W2/5/
Refer this tutorial.