konvajs/konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

konva's Issues

Compositing to "erase" pixels

Is it possible to define a rubber function on images?

Would it be possible to create a circle with a transparent background color when you move the circle over an image it will paint transparent on the image, i.e., it erases parts of the image?

Browser is crashing with a simple grid.

Currently using the following code:

var gridSize = 25,
    canvasHeight = 600,
    canvasWidth = 1000;
var stage = new Konva.Stage({
    container: 'canvas',
    width: canvasWidth,
    height: canvasHeight
});
var background = new Konva.Layer();
for (var i = 0; i <= (canvasWidth / gridSize); i++) {
    background.add(new Konva.Line({
        points: [i * gridSize, 0, i * gridSize, canvasHeight],
        stroke: '#ccc',
        strokeWidth: 1
    }));
    background.add(new Konva.Line({
        points: [0, i * gridSize, canvasWidth, i * gridSize],
        stroke: '#ccc',
        strokeWidth: 1
    }));
}
stage.add(background);

Crashing in both Firefox 35 & Chrome 40 with high CPU usage.

Gradient on text not supported/working

As shown in this codepen the gradient is not working on a Text shape.

Not sure if this is an error or if this is never supposed to work.

Konva.document.createWIndow() raises an error: "TypeError: undefined is not a function"

When test konva.js in nodejs environment

$ node nodejs-demo.js
/Users/ctslin/temp/konvajs/konva/dist/konva-dev.js:604
            Konva.window = Konva.document.createWindow();
                                          ^
TypeError: undefined is not a function
    at /Users/ctslin/temp/konvajs/konva/dist/konva-dev.js:604:43
    at Object.<anonymous> (/Users/ctslin/temp/konvajs/konva/dist/konva-dev.js:621:2)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/ctslin/temp/nodejs-demo.js:2:13)
    at Module._compile (module.js:460:26)

$ npm list jsdom
└── [email protected]

$npm list konva
└── [email protected]
``

thanks for your help.

Nodes should have "childrenChange" event

Currently only "add" event is supported, it would be great to have a companion event.

How to ingreted custom fonts with Konva in nodejs environments?

Hi, how to ingreted custom fonts(local fonts in server's folder or google web fonts) with Konva in nodejs environments?

thanks for your help~

Include Pull Requests from KineticJS

Do you have plans to include the Pull Requests from KineticJS?

https://github.com/ericdrowell/KineticJS/pulls

.find() works differently to previous version?

Hi @lavrton thanks for forking this, hopefully KineticJS will continue to see the love it deserves.

On 5.1.0 This code worked flawlessly previously:

    var boundingBox = group.find('.bounding-box');
if (boundingBox.length == 0) {
    throw 'Unable to set drag bounds. Could not find bounding box element';
}

and by that I mean the length wasn't typically 0. However 5.1.9 broke this and now it always equates to 0. Did I miss something?

can you add textrectangle together

As I use using kinetic javascript before and now I would like to use konva. Kindly try to implement rectangle with text rather the code will be more and more.
Thanks.

Konva.Rect - getWidth & getHeight

The result of my KonvaJS find() which returned a Konva.Rect and called

getWidth()
getHeight()

now returns NAN rather than the actual width or height. It worked correctly in 0.8, but not in 0.9. Is this intentional?

Thanks
Ben

Incorrect element receiving mouse events

The example can be found here: https://github.com/miscalc/logic-builder

While attempting to drag the second element (OR) the third element (NOT) always receives the event.

• I have tested with Kinetic 5.1.0 as well and it has the exact same behavior.
• This behavior existed before I added the "cloneFunc" and had the draggable property set to true on each of the shapes.
• I've tried renaming the elements to see if this was a namespace conflict, which did not work.
• When I change the order that the elements are loaded into the layer (loading NOT first), it works until you drag/clone another element before the NOT gate. Example: After adding NOT to the layer first, drag the first element (AND), then drag the third element (NOT). When attempting to drag the cloned AND the event is received by the cloned NOT.
• I've tried putting each element in a different layer and the NOT gate exhibits different behavior in that it infinitely clones across the screen where the others do not.

Drag breaks when moving a group of shapes between layers on mousedown

This is how I handle events:

var Scene = {

_onPuzzleMouseDown: function (node) {
  this._addToDragLayer(node);
},

_onPuzzleMouseUp: function (node) {
  this._removeFromDragLayer(node);
},

_addToDragLayer: function (node) {
  node.moveTo(this._dragLayer);
  this._dragLayer.draw();
  this._puzzleLayer.draw();
},

_removeFromDragLayer: function (node) {
  node.moveTo(this._puzzleLayer);
  this._dragLayer.draw();
  this._puzzleLayer.draw();
}

};

This is how I create group:

var group = new Konva.Group();

group.on('mousedown.scene touchstart.scene', this._onPuzzleMouseDown.bind(this, group));
group.on('mouseup.scene touchend.scene', this._onPuzzleMouseUp.bind(this, group));
group.add(shape1);
group.add(shape2);

this._puzzleLayer.add(group);

This works for single node but breaks for group.

What I see is dragging happens but there is no repaint. So if I hold mouse, move it around and release it, then group teleports to mouse position.

If I use dragstart to move node onto drag layer, then everything is fine.

need-jsbin

Line Interpolation

Is there some line interpolation build in Konva like proposed in the following post:

http://stackoverflow.com/questions/28638627/draw-smooth-lines-on-a-canvas

Finalize the fork

I noticed that on the main repo the forked link has been removed, the reason for this I am unsure about, however it does bring up a couple thoughts.

Because of all the search engine indexing on the retired repo, it leads people to think that is no longer maintained/updated without some sort of link. KineticJS beats many other repo's in my opinion for one simple reason, it does not try to copy flash. I could be wrong on some other libraries but most I have seen have tried to mimic the flash api's for this sort of thing. KineticJS stays JS and not being someone who started out in flash, but javascript its the perfect library for me.

So I can see 2 ways of getting through this.

1. Put more force in the old repo to point to this one.
2. Start fresh.

If the old repo can continue to point to this one, eventually links and such will move to reflect its new home. Eric did a great job here, but if he is to busy to maintain it I would hate for it to fall into obscurity.

As for starting fresh it would be similar to what other repositories have done with forks, rename them. This way any new documentation will not have to worry about being buried in search pages and it will give it new life. Right now many of the tutorials for KineticJS are actually broken, the examples don't work, so unless they are fixed it would be best to use a new name to bring new tutorials to the top.

I intend to help out with KineticJS however i can, I have noticed a few performance issues that I have been working to get around and would love to contribute that if/when i come up with a solution, however without the main repo being actively maintained, and this one being hard to find unless you visited the repo page when the fork link was there it might not get the attention it needs.

Anyway this is only my opinion.

NuGet package for konva

I think it might be good to have a NuGet package for konva.

The differences between scene and hit ?

can you tell me the differences between scene region(renderer) and hit region(renderer) particularly? And why there will be a "hit" term? When should I use it?
Thanks.

Why CONTENT_TOUCHMOVE event dont call evt.preventDefault

Hi, lavrton!
why CONTENT_TOUCHMOVE event don't call evt.preventDefault? when in ipad safari this drag will cause the full page drag down.

_touchmove: function(evt) {
            this._setPointerPosition(evt);
            var dd = Konva.DD,
                shape;
            if (!Konva.isDragging()) {
                shape = this.getIntersection(this.getPointerPosition());
                if (shape && shape.isListening()) {
                    shape._fireAndBubble(TOUCHMOVE, {evt: evt});
                    // only call preventDefault if the shape is listening for events
                    if (shape.isListening() && evt.preventDefault) {
                        evt.preventDefault();
                    }
                }
                this._fire(CONTENT_TOUCHMOVE, {evt: evt});
            }
            if(dd) {
                dd._drag(evt);
                if (Konva.isDragging()) {
                    evt.preventDefault();
                }
            }
        },

Drag performance

Hi,

Did you experience FPS drop when you have lots of draggable shapes on layer? According to my tests FPS drops a lot with each draggable node, but I am not sure why. I feel like all draggable nodes somehow participate in some sort of repainting process, but sceneFunc does not fire which means that it blits cached canvas..

p.s: I experience this on FF/Mac, Safari runs very smooth. Can be browser bug / poor perf.

Simulate drag event?

I am looking for a way to test a game logic. Is it possible to simulate drag event from point A to point B?

Load handling

I don't think there should be any dedicated way to load images or other assets in this library, because so many other stand alone libraries do it so well. However when handling shapes (images mainly) it gets rather strange to constantly make sure that the asset is already loaded before drawing the shape.

So rather then making an area for loading, an area that can tie into other libraries to handle it, but sync the load into konva for loading, so the callbacks are carried over, and the shape will ensure it has loaded beforehand, or at whatever point deemed by the person using it.

I have added something similar into my own library that uses kinetic (soon to be transferred to konva) and it works pretty well to allow assets to be added, without the need to manually ensure the assets have loaded before the draw.

So something like this.

var stage = new Konva.Stage(options);
var layer = new Konva.Layer();

var image = new Konva.Image({
   image: url //if it is already an image object it can assume its loaded
});

layer.add(image);
layer.on('ready',function(){
   stage.add(layer);
});

This is of course the result without the messing around with the "load" object to handle and connect to the external library but the idea is there.

so here is an example of that

var options = {
   loader: new Konva.Loader({
      add: function(url){
         someloader.add(url);
      },
     progress: function(callback){
         someloader.on('asset',callback);
     },
     complete: function(callback){
        someloader.on('complete',callback);
     }
   });
};

a very rough example but it should paint the picture, set up the options for the stage and then any assets later will automatically be managed without the need for extra callbacks, also allows the already powerful event system to be more powerful. It would not remove the ability to do it as it is currently, only add an extra option. It could even cache images that are the same so they never have to fire a load event twice and such.

Anyway an idea that I have been wishing this library had as my use of it uses a lot of images. I would like to see if anyone else has an opinion on it before i start trying to do a pull request for it. the above method is far from what the end product will be though, just the original concept as my own implentation uses PreloadJS forcibly.

Text rendering quality

Hi,

Is there any way to improve text rendering quality?

• top row is not cached
• bottom is cached (only text is cached)

However, text looks fluffy and blurry even without cache, is it possible that pixelRatio causes this?

UPDATE

I found that retina rendering is not applied on laptops which makes picture blurry:

konva/src/Canvas.js

Line 10 in 4e23aa8

_pixelRatio = Konva.UA.mobile ? (function() {

The text is crisp and clear since I removed that check for mobile browser:

Do you think we can let desktop browsers to render nice crisp picture? I don't see zooming problems mentioned in comment, the picture seems to zoom naturally.

Demos?

Wondering where are the demos for this rebirth fork?

I get 404 for each item in the Sandbox section.

What to do about pull requests on Eric's KineticJS

I had a pull request on Eric's Kinetic GIT page. What should I do? Is there an easy way to move it over?

getClientRect returns wrong coordinates

I have the following layout:

• Group { x: 444.6, y: 339, width: 90.8, height: 36 }
  • Shape { x: 0, y: 0, width: 91, height: 39.6 }
  • Text { x: 15, y: 8, width: 50, height: 20 }

Shape has a custom shadow that's why it's height is a little bit larger than the parent group, neglect it. This shape implements getClientRect to make sure that custom shade is included into cached canvas:

getClientRect: function () {
  var rect = Konva.Shape.prototype.getClientRect.apply(this, arguments);
  rect.height += this.shadeOffset();
  return rect;
}

However clientRect returned for group is:

x: 460, y: 347, width: 76, height: 32

this matches text's top left corner which is wrong, I guess getClientRect should take group's position into consideration.

Crash in Konva.Animation._runFrames

Hi,

I experience some weird bug in Konva.Animation._runFrames. It seems it is related to delayed frame update after Konva.Tween already destroyed.

[Error] TypeError: undefined is not an object (evaluating 'layer._id')
    _runFrames (konva.js, line 10124)
    _animationLoop (konva.js, line 10140)

There is a warning in code saying that animations.length should not be cached as it may change.

The crash happens on the following line:

https://github.com/konvajs/konva/blob/master/src/Animation.js#L235

Scope:

• layer = undefined
• animations.length = 0
• layers is empty.
• func points to that.tween.onEnterFrame

This happens shortly after I destroy all tweens and then all layers on stage.

My tearDown method looks as following:

tearDown: function () {
  log('tearDown');

  // cancel and destroy all tweens
  _.invoke(this._tweens, 'destroy');

  // destroy layers
  _.invoke(this._layers, 'destroy');
},

tweens array contains Konva.Tween and layers array contains Konva.Layer.

I started digging around a little bit and I can't find for example whether Konva.Sprite stops animation or interval when it's destroyed. I use animated sprites so that's one of my thoughts why this may happen.

Refresh hit graph when on stage.listening() changes

There is a problem with layers hit graph when stage is not listening to events. Essentially hit graph is not refreshed when stage starts listening to events.

Currently I workaround this with extra stage.drawHit().

Probably that should be fixed...

Regression in attrs initialization flow

Hi,

I am migrating from KineticJS to Konva and everything seems fine except some of attributes are missing on my custom subclass. I pass Kinetic.Image (aka Konva.Image) into config.image and it does not make it into attrs dictionary.

Looking at THIS right now and thinking "You gotta be shitting me".

// compatibility
var Kinetic = Konva;

// custom class
var Button = function (config) {
  this._initButton(config || {});
};

Button.prototype = {
  _initButton: function(config) {
    // call super constructor
    Kinetic.Group.call(this, config);
    this.className = 'Button';
  }
};

Kinetic.Util.extend(Button, Kinetic.Group);
Kinetic.Factory.addGetterSetter(Button, 'text', '');
Kinetic.Factory.addGetterSetter(Button, 'image');

config dump:

> config
< Object
fontSize: 16
image: Object
text: "Locked"
__proto__: Object

this.attrs dump:

> this.attrs
< Object
fontSize: 16
text: "Locked"
__proto__: Object

Update:

Changed this

if (key === CHILDREN || config[key] instanceof Konva.Node) {

to this:

if (key === CHILDREN) {

Problem solved. It is a very strange unimplemented part of Konva.Node.

drawHitFromCache issues on retina

Hi,

It seems that drawHitFromCache does not work properly anymore.

I have the following configuration:

• Group
  • Image

// get image from group
var image = group.findOne('.image');

// reset offset if was previously set
image.offset({ x: 0, y: 0 });

// cache image
image.cache();

// update hit from image
image.drawHitFromCache();

// restore offset
image.offset({
  x: DRAG_STROKE_WIDTH,
  y: DRAG_STROKE_WIDTH
});

// redraw layer's hit map
this.layer().drawHit();

I have a retina display, but if I set Konva.pixelRatio = 1; then everything works as expected. I guess this issue is connected to #46

Changing hitCanvas to use the same pixelRatio helps, then the fix is the same as I used for filter canvas:

context.drawImage(hitCanvas._canvas, 0, 0, hitCanvas.width / ratio, hitCanvas.height / ratio);

(I had to remove pixelRatio setting for hitCanvas so it could use device pixelRatio)

But hey we could probably use low-detail hitCanvas and stretch it, I guess that was the point of fixing hitCanvas at pixelRatio = 1.

Rotation Origin

Hello guys,

is there any way to define a rotation origin? right now i can setup an offset and when i call rotate method my image is rotated around the offset. the Problem is that the offset also changes the x/y positions.

http://onlinetowerdefense.github.io/Client/ the towers and units are not on their original positions and i could not figure out where i can setup a rotation origin.

hope you can help me,

cheers

perfectDrawEnabled for Konva.Line

Any chance of supporting 'perfect draw' on line objects? Is it already there?

I am using Konva.Line to draw a convex hull polygon around some other shapes. I need a large stroke width to ensure the convex hull always fully encapsulates the shape (without adding expensive logic calculations).

            var poly = new Konva.Line({
              points: hullPoints,
              fill: color,
              stroke: color,
              lineJoin: 'round',
              lineCap: 'round',
              tension : 0.7,
              strokeWidth: 60,
              perfectDrawEnabled : true,
              closed : true
            });

Expose measureText from canvas context

It would be convenient to have the canvas context method "measureText" exposed in the Konva.Context class. I'm new to the framework, but it seems like that could be accomplished by adding this function to the Konva.Context prototype:

measureText: function() {
    var a = arguments;
    return this._context.measureText(a[0]);
}

Like I said, I'm new to the framework, so feel free to let me know if/why this won't work or doesn't fit as well as how to actually contribute the change if it does fit.

stage.toDataURL() bug

stage.toDataURL() throws an exception:

[Error] TypeError: undefined is not a function (evaluating 'config.callback(canvas.toDataURL(mimeType, quality))')
    onload (konva.js, line 8681)

dragBoundFunc and pos variable used on example

Hi
Following example on JSDoc generate error when you will try to use pos variable.

node.dragBoundFunc(function(){
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
});

It should be changed to:

node.dragBoundFunc(function(){
return {
x: this.getAbsolutePosition().x,
y: this.getStage().getPointerPosition().y
};
});

FastLayer does not respect position

I use position to center layer on screen. FastLayer does not respect position and always renders itself in top/left corner.

Line() misbehaves when given an X or Y

Reproduce:

Create a line with an X and Y set, and feed it the same X and Y as it's first set of points:

Kinetic.Line({
  x: 25,
  y: 25,
  stroke: 'red',
  points: [25, 25, 100, 100]
});

The line doesn't actually appear where it should.. instead it seems to appear at 50, 50. Obviously this effect is worse the farther from 0,0 you start the line. We probably shouldn't be able to give lines an X or a Y at all.

Stage.toDataURL() invalid output on Retina

Works fine on pixelRatio = 1 though.

var image = document.getElementById('tiger');

Konva.pixelRatio = window.devicePixelRatio; // 1

var stage = new Konva.Stage({
    container: 'konva-container',
    width: 640,
    height: 480
});
var layer = new Konva.Layer();
var tiger = new Konva.Image({
    image: image,

    // assume tiger is in 2x scale
    width: image.width * 0.5,
    height: image.height * 0.5,

    draggable: true
});

tiger.cache();
tiger.drawHitFromCache();
layer.drawHit();

layer.add(tiger);
stage.add(layer);
stage.draw();

var snapshotStage = new Konva.Stage({
    container: 'konva-container2',
    width: 640,
    height: 480
});

stage.toImage({
    callback: function (image) {
        var imageNode = new Konva.Image({
            image: image
        })
        var snapshotLayer = new Konva.Layer();
        snapshotLayer.add(imageNode);
        snapshotStage.add(snapshotLayer);
        snapshotStage.draw();
    }
});

Create an initial change log (from KineticJS to KonvaJS)

Thanks for taking up authoring of KineticJS in the form of KonvaJS!

Could you create an initial log showing the changes occurring from the forked version of KineticJS to the first version of KonvaJS?

This change log would help orient all of us who were familiar with KineticJS.

Color animations in tween

I am not able to animate fill color. I am pretty sure you fixed that before...

var stage = new Konva.Stage();
var layer = new Konva.Layer();
var circle = new Konva.Circle({
   x: 100, y: 100,
   radius: 40,
   fill: 'rgba(0,255,0,0.5)'
});

stage.add(layer);
layer.add(circle);

var tween = new Konva.Tween({
  node: circle,
  duration: 0.5,
  easing: Konva.Easings.EaseInOut,
  fill: 'rgba(0,255,0,0)',
  onFinish: function () {
    circle.cache();
  }
});

tween.play();

It seems that transparency is totally ignored.

Fix tests to be pixelRatio independent

Hi,

It seems that gulp test runs in non-retina environment while if I start gulp server and open http://localhost:8080/test/runner.html it runs tests with pixelRatio used from browser. (Firefox here)

Is it even supposed to run on regular browser?

passes: 356 failures: 37 duration: 19.42 sassertions: 1487

The list of failing tests on retina:

Context

• context wrapper should work like native context

  AssertionError: native context has no property fillStyle: expected false to equal true

Node

• set shape opacity to 0.5

  AssertionError: expected 'clearRect(0,0,289,100);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();' to equal 'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();'

Stage

• set stage size

  AssertionError: expected 666 to equal 333

• test getAllIntersections

  AssertionError: 17) getAllIntersections should return one shape: expected 0 to equal 1

Layer

• test clear()

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,289,100);' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);'

• test clear() with bounds

AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(100,100,50,50);' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(100,100,100,100);'

Shape

• test intersects()

  AssertionError: (200,100) should intersect the shape: expected false to equal true

• fill with shadow and opacity

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();restore();restore();'

• stroke with shadow and opacity

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();rect(0,0,100,50);closePath();lineWidth=20;strokeStyle=red;stroke();restore();restore();'

• fill and stroke with opacity

  AssertionError: Result from Konva is different with canvas result: expected false to equal true

• fill and stroke with shadow

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();'

• fill and stroke with shadow and opacity

  AssertionError: Result from Konva is different with canvas result: expected false to equal true

• shape intersect with shadow

  AssertionError: expected false to equal true

• scale should also effect shadow offset

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(0.5,0,0,0.5,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();restore();' to equal 'clearRect(0,0,578,200);save();transform(0.5,0,0,0.5,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,100,100);closePath();fillStyle=green;fill();restore();restore();'

• scale of parent container should also effect shadow offset

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(0.25,0,0,0.25,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();restore();' to equal 'clearRect(0,0,578,200);save();transform(0.25,0,0,0.25,100,100);save();shadowColor=rgba(0,0,0,1);shadowBlur=0;shadowOffsetX=5;shadowOffsetY=5;beginPath();rect(0,0,200,200);closePath();fillStyle=green;fill();restore();restore();'

• optional disable buffer canvas

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,50);globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);globalAlpha=0.5;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;stroke();restore();'

• optional disable shadow for stroke

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;shadowColor=rgba(0,0,0,0);stroke();restore();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);save();shadowColor=rgba(128,128,128,1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=10;strokeStyle=black;shadowColor=rgba(0,0,0,0);stroke();restore();restore();'

Collection

• add circle to stage

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=red;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=green;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=green;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=red;fill();lineWidth=4;strokeStyle=black;stroke();restore();clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=green;stroke();restore();save();transform(1,0,0,1,300,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=blue;fill();lineWidth=4;strokeStyle=green;stroke();restore();'

Rect

• add rect to stage

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();lineWidth=2;strokeStyle=blue;stroke();restore();'

Circle

• add circle to stage

  AssertionError: expected 'clearRect(0,0,289,100);clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'

Image

• add image

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,289,100);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,289,100);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,200);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();' (:0)
    process.on/global.onerror@http://localhost:8080/node_modules/mocha/mocha.js:5879:10
  

• image with opacity and shadow

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);save();globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();restore();' (:0)
  process.on/global.onerror@http://localhost:8080/node_modules/mocha/mocha.js:5879:10

• image with stroke, opacity and shadow

  AssertionError: expected 'clearRect(0,0,289,100);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();' to equal 'clearRect(0,0,578,200);save();save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0);restore();restore();' (:0)
  process.on/global.onerror@http://localhost:8080/node_modules/mocha/mocha.js:5879:10

Line

• add line with shadow

  AssertionError: expected 'clearRect(0,0,289,100);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();' to equal 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();restore();'

Text

• text with stoke and strokeScaleEnabled

  AssertionError: Result from Konva is different with canvas result: expected false to equal true

Blob

• add blob

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(73,140);bezierCurveTo(90.922,74.135,129.542,38.279,340,23);bezierCurveTo(471.142,13.479,514.876,54.33,500,109);bezierCurveTo(482.876,171.93,463.05,158.163,300,170);bezierCurveTo(121.45,182.963,58.922,191.735,73,140);closePath();fillStyle=#aaf;fill();lineWidth=10;strokeStyle=blue;stroke();restore();'

Ellipse

• add ellipse

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();save();scale(1,0.5);arc(0,0,70,0,6.283,false);restore();closePath();fillStyle=green;fill();lineWidth=8;strokeStyle=black;stroke();restore();'

Spline

• add splines

  AssertionError: expected 'clearRect(0,0,289,100);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore();' to equal 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);bezierCurveTo(501.006,3.77,519.038,68.068,500,109);quadraticCurveTo(479.038,154.068,300,109);lineCap=round;lineWidth=10;strokeStyle=blue;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);quadraticCurveTo(74.006,54.77,340,23);quadraticCurveTo(501.006,3.77,500,109);lineCap=round;lineWidth=10;strokeStyle=red;stroke();restore();save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;lineWidth=10;strokeStyle=green;stroke();restore();'

Sprite

• don`t update layer too many times 2

  AssertionError: expected false to equal true (:0)
  process.on/global.onerror@http://localhost:8080/node_modules/mocha/mocha.js:5879:10

Wedge

• add wedge

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,1.257,false);lineTo(0,0);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'

Arc

• add arc

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.571,false);arc(0,0,50,1.571,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,80,0,1.571,false);arc(0,0,50,1.571,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'

Ring

• add ring

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,50,0,6.283,false);moveTo(90,0);arc(0,0,90,6.283,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,289,100);beginPath();arc(0,0,50,0,6.283,false);moveTo(90,0);arc(0,0,90,6.283,0,true);closePath();fillStyle=green;fill();lineWidth=4;strokeStyle=black;stroke();restore();'

Tween

• tween node

  timeout of 2000ms exceeded
  Runnable.prototype.resetTimeout/this.timer<@http://localhost:8080/node_modules/mocha/mocha.js:4295:19

• zero duration

  AssertionError: expected 100 to equal 200 (:0)
    process.on/global.onerror@http://localhost:8080/node_modules/mocha/mocha.js:5879:10

Label

• cache label

  AssertionError: Result from Konva is different with canvas result: expected false to equal true

RegularPolygon

• polygon cache

  AssertionError: Result from Konva is different with canvas result: expected false to equal true

Path

• Stroke only when no fill

  AssertionError: expected 'clearRect(0,0,289,100);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore();' to equal 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(50,0);bezierCurveTo(50,150,170,170,200,170);lineWidth=2;strokeStyle=black;stroke();restore();'

Register on Bower?

Looks like we have a valid Bower.json, but are we published on the bower registry? Are we going to inherit 'kineticjs' or will we use a new name?

Layout support

It is planned or possible added layout support?
For example from D3 https://github.com/mbostock/d3/wiki/Layouts or Dracula http://www.graphdracula.net/

Cache issues when using FX

Hi,

I am caching the whole group and I experience some pixelRatio issues. It seems that the larger pixel ratio is, the greater is the cached image in the end. It seems the image is like 4 times larger than on 1x ratio. 1x works fine. Same effect on both iPhone and Mac.

if(window.devicePixelRatio) {
  Konva.pixelRatio = window.devicePixelRatio;
}

var W = 800;
var H = 600;

var group = new Konva.Group();
var backgroundImage = new Konva.Image({
  x: 0, y: 0,
  width: W,
  height: H,
  image: image
});
group.add(backgroundImage);

// removed grid drawing for sanity...

group.cache({
    x: 0, y: 0,
    width: W,
    height: H
});
group.filters([ Konva.Filters.Grayscale, Konva.Filters.Brighten ]);
group.brightness( 0.2 );

Latest KineticJS:

Konva:

I barely understand what's going on in cache internals, but it seems if I return sceneCanvas instead of filterContext then picture has proper size.

https://github.com/konvajs/konva/blob/master/src/Node.js#L335

It can be that filterContext is somehow improperly configured..

add a new event "swipe"

can you add a new event of "swipe"? It's convenient for mobile development.

Version reset?

Just a thought I had now that the library is renamed.

Since the library is renamed, should there be a version reset as well? old versions that are kinetic could be linked to rather then having a tag. There could be one made 1.0.0-dev or something until there is the first "full" Konva release

Group width() and height()

Hi

Shouldn't this functions calculate width and height? Is there any function which will calculate width and height of grouped objects or layer?

Line tension property.

Maybe this is the intended result (I'd be surprised) however the line tension property results in some odd results. Its not obvious if it actually does anything useful:

new Konva.Line({
    points: coordUtil.convertArrayObjectToArray(self.coordinates),
    closed: true,
    fillEnabled: false,
    stroke: self.getColour(),
    strokeWidth: self.strokeWidth,
    name: 'markup',
    tension: 0,
    drawHitFunc: function (context) {
        context.beginPath();
        context.lineWidth = 10;
        context.moveTo(self.coordinates[0].x, self.coordinates[0].y);
        _.forEach(self.coordinates, function (coordinate) {
            context.lineTo(coordinate.x, coordinate.y);
        });
        this.setStrokeWidth(10);
        context.fillStrokeShape(this);
        this.setStrokeWidth(self.strokeWidth);
    }
});

tension: 0,

tension: 0.1,

tension: 1,

tension: 10,

I checked the Shape.Line documentation but its lacking any real detail.
Thanks!

Ben

Own Kinectic Org

Hey @lavrton Thanks for taking over this great lib. Would it be possible to create a kinetic org? Otherwise I fear, that the development of kinetic splits.

ericdrowell/KineticJS#1055

Use display: block for konvajs-content

This bug (or feature) has been around for a while and I always had to solve it manually with very aggressive CSS. Before it was .kineticjs-content. Without this fix I get scrollbars all over the place on fullscreen canvas. Can we remove inline-block from canvas element once and forever for the love of god?

.konvajs-content { display: block !important; }

In documentation stop animation and scale animation are switched

If you go to the documentation the stop animation has the scale animation document and vice versa

Performance improvements

Hi,

I've been reading some articles and it seems that it's highly suggested to avoid sub pixel rendering as it causes browser to turn on antialiasing which supposed to be expensive. Therefore I guess we could improve _tweenFunc and use Math.round when we work with position or offset interpolation.

This is more like a suggestion and food for thoughts. I don't expect it to be fixed because I don't see performance improvements when using integers. (testing on Safari)