Questions tagged [kineticjs]

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications.

An object oriented HTML5 Canvas JavaScript framework with a well-documented API, along with tutorials and labs to cover most of the basic needs.

KineticJS is no longer maintained. A fork is available http://konvajs.github.io/.

KineticJS supports node nesting, layering, caching, serialization, deserialization, animations, transitions, filters, custom shapes, configurable drag & drop, and more.

Multiple Canvases are used to create a high performance animation and event detection system. KineticJS also utilizes a virtual node system which allows developers to create hierarchies which resemble familiar HTML DOM structures and use familiar selectors (eg. '#foo') to manipulate nodes.

KineticJS allows you to draw shapes onto the stage, add event listeners to them, group them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

2111 questions
9
votes
2 answers

Now that KineticJS is no longer maintained, where can I find its documentation?

Active maintenance of KineticJS was discontinued by its founder in December 2014. The documentation once hosted on the kineticjs.com website now returns 404. Where can I find the last version of the documentation?
klenwell
  • 6,978
  • 4
  • 45
  • 84
9
votes
3 answers

Allowing the user to type text in a HTML5 Canvas game

I'm trying to write my first HTML5 game using a combination of Canvas and the excellent KineticJS library and I've hit a bit of a wall early on. What I want to do is ask the user to enter their name in a box in the game. Having done some research, i…
Craigeve
  • 155
  • 2
  • 6
9
votes
7 answers

Zoom and Pan in KineticJS

Is there a way one could zoom and pan on a canvas using KineticJS? I found this library kineticjs-viewport, but just wondering if there is any other way of achieving this because this library seems to be using so many extra libraries and am not sure…
Legend
  • 113,822
  • 119
  • 272
  • 400
9
votes
2 answers

Masking shapes in HTML5 canvas?

Apologies if this has been asked elsewhere but it's pretty hard to phrase as it is so I couldn't find anything. Is there any way to implement masks in canvas? For example, using shapes only (no images) I draw a house with a window. I also have a…
Mitya
  • 33,629
  • 9
  • 60
  • 107
8
votes
2 answers

How to upload canvas image through FormData/multipart with Jquery Ajax?

I want to upload canvas image through formdata/multipart. I have a canvas which generates the image data with toDataURL(). I want to upload image data as formdata/multipart with Ajax post. Here is the code .... var dataUrl = …
Pramod Tiwari
  • 161
  • 1
  • 6
8
votes
4 answers

Scaling to a fixed point in KineticJS

I'm having some problems with scaling a container to a fixed point. In my case I'm trying to scale (zoom) a stage to the mouse cursor. Here is a way to do with pure canvas: http://phrogz.net/tmp/canvas_zoom_to_cursor.html (as discussed at Zoom…
Skarbo
  • 697
  • 1
  • 6
  • 12
7
votes
0 answers

KineticJS : snap functionality using DragBoundFunc is not working for all shapes

I implemented a function that detects collision between two shapes, and another function that limits the dragBound to the borders when collision is detected, in order to implement the snap functionality, and then add to Kinetic.Group. So practically…
Sahar Ch.
  • 489
  • 1
  • 8
  • 28
7
votes
2 answers

Angular JS identify an digest complete event and removing # from url in angular js during viewchange

1) Is there any digest complete event which I can use to update my canvas. I have an angular app which has view for different properties of the canvas object. Whenever I change the property, once the digest is complete, If I can get the digest…
anandaravindan
  • 2,401
  • 6
  • 25
  • 35
7
votes
3 answers

Making an Object "transparent" for Mouse Events?

I'm working on a project with HTML5 Canvas and KineticJS. A half-transparent overlay (a KineticJS group or layer) is placed all over the scene. The problem is: Mouse events bound to KineticJS objects under this overlay are not processed. How can I…
Michael
  • 7,407
  • 8
  • 41
  • 84
7
votes
3 answers

Interactive drawing with kineticjs

I'd like to draw a rectangle with click and drag. How can I do this ? Where do I have to put my click event listener ? On the stage or on the layer ? I have the following code but it doesn't work : stage = new Kinetic.Stage({...}) layer = new…
jrabary
  • 2,411
  • 1
  • 28
  • 50
6
votes
2 answers

HTML5: Fill circle/arc by percentage

Here is my pseudo code: var percentage = 0.781743; // no specific length var degrees = percentage * 360.0; var radians = degrees * Math.PI / 180.0; var x = 50; var y = 50; var r = 30; var s = 1.5 * Math.PI; var context =…
Nahydrin
  • 13,197
  • 12
  • 59
  • 101
6
votes
1 answer

How to warp image

I am working a project where we need to warp image Basically, I want to take this image: And turn it into this: Please note : text also warped. I honestly have no clue how to go about it so any help would be greatly appreciated! Here is demo…
user3414955
  • 29
  • 1
  • 3
6
votes
3 answers

How do you add a line break inside of a javascript variable using KineticJS?

I have a variable that looks like this: var simpleText = new Kinetic.Text({ text: 'where text goes', fontSize: 24 }); How do I insert a line break where the text goes. I've tried: text: 'where text goes \n where text goes', text: 'where…
user761479
  • 145
  • 1
  • 1
  • 7
6
votes
1 answer

kineticjs drag and drop image from dom into canvas

I have an image loaded on the dom already, and I want to be able to drag that image into a canvas and drop it into the canvas and create a kineticjs object out of it. I don't know how to make the image draggable, and I don't know how to make the…
TriFu
  • 641
  • 3
  • 10
  • 19
6
votes
2 answers

Get multiple objects from stage by class name in KineticJS

I am using using JavaScript library Kinetic.js for HTML5 canvas. Here is the method stage.get() to get objects from stage (canvas). I have assigned the id's or class names to each object if I get the object by id var obj = stage.get('#obj_id') it…
Muhammad Usman
  • 10,426
  • 22
  • 72
  • 107