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

Overview

Konva logo

Konva

Financial Contributors on Open Collective Gitter npm version bower version Build Status  Code Climate CDNJS version

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

You can draw things onto the stage, add event listeners to 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. Served hot with a side of awesomeness.

This repository began as a GitHub fork of ericdrowell/KineticJS.

Quick Look

<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<div id="container"></div>
<script>
    var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight
    });

    // add canvas element
    var layer = new Konva.Layer();
    stage.add(layer);

    // create shape
    var box = new Konva.Rect({
        x: 50,
        y: 50,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });
    layer.add(box);

    layer.draw();

    // add cursor styling
    box.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
    });
    box.on('mouseout', function() {
        document.body.style.cursor = 'default';
    });
</script>

Browsers support

Konva works in all modern mobile and desktop browsers. A browser need to be capable to run javascript code from ES2015 spec. For older browsers you may need polyfills for missing functions.

At the current moment Konva doesn't work in IE11 directly. To make it work you just need to provide some polyfills such as Array.prototype.find, String.prototype.trimLeft, String.prototype.trimRight, Array.from.

Loading and installing Konva

Konva supports UMD loading. So you can use all possible variants to load the framework into your project:

1 Load Konva via classical <script> tag:

<script src="https://unpkg.com/[email protected]/konva.min.js"></script>

You can also use a CDN: https://unpkg.com/[email protected]/konva.min.js

2 Install with npm:

npm install konva --save
// The old way (e.g. a CommonJS-style import)
var Konva = require('konva');

// The modern way (e.g. an ES6-style import for webpack, parcel)
import Konva from 'konva';

Typescript usage

Add DOM definitions into your tsconfig.json and set esModuleInterop to true:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "lib": [
        "es6",
        "dom"
    ]
  }
}

Then use it:

import Konva from 'konva';

3 Minimal bundle

import Konva from 'konva/lib/Core';
// Now you have a Konva object with Stage, Layer, FastLayer, Group, Shape and some additional utils function.
// Also core currently already have support for drag&drop and animations.
// BUT there are no shapes (rect, circle, etc), no filters.

// but you can simply add anything you need:
import { Rect } from 'konva/lib/shapes/Rect';
// importing a shape will automatically inject it into Konva object

var rect1 = new Rect();
// or:
var shape = new Konva.Rect();

// for filters you can use this:
import { Blur } from 'konva/lib/filters/Blur';

4 NodeJS env

We are using node-canvas to create canvas element. Please check installation instructions for it. Then just run

npm install konva-node

Then in you javascript file you will need to use

const Konva = require('konva-node');

See file konva-node/demo.js file in this repo as a sample.

Backers

Change log

See CHANGELOG.md.

Building the Konva Framework

To make a full build run npm run build. The command will compile all typescript files, combine then into one bundle and run minifier.

Testing

Konva uses Mocha for testing.

  • If you need run test only one time run npm run test.
  • While developing it is easy to use npm start. Just run it and go to http://localhost:8080/test/runner.html. The watcher will rebuild the bundle on any change.

Konva is covered with hundreds of tests and well over a thousand assertions. Konva uses TDD (test driven development) which means that every new feature or bug fix is accompanied with at least one new test.

Generate documentation

Run npx gulp api which will build the documentation files and place them in the api folder.

Pull Requests

I'd be happy to review any pull requests that may better the Konva project, in particular if you have a bug fix, enhancement, or a new shape (see src/shapes for examples). Before doing so, please first make sure that all of the tests pass (gulp lint test).

Contributors

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Comments
  • Who is using Konva?

    Who is using Konva?

    Hello, everyone. ✋ I am going to create a special page on the Konva website with a list of products that are using Konva.

    If you are using Konva in your app, please, add a comment on this issue. Any products are welcome: private enterprise apps, startups, games, open-source projects, etc.

    Also, please add this information if possible:

    1. Product description
    2. Screenshot
    3. Direct link to a product (or direct link to the page where konva is used)
    4. Stack (any other libraries you use here?)

    I may not add any projects to the main list. But it will be still good to have a list here, so other people can check the demos.

    opened by lavrton 44
  • Transformer with multiple node

    Transformer with multiple node

    Hello everyone,

    I would like to select two elements and transform them without grouping them. Is it possible to improve the Transformer object with the ability to add multiple nodes? it would be absolutely great.

    Thank you in advance, your library is great.

    enhancement 
    opened by sineus 40
  • Implement transforming tool

    Implement transforming tool

    Konva doesn't have built-in transforming tool like this:

    screen shot 2017-09-05 at 11 19 21

    I already implement it several times for different applications. I think it will be nice to have it as a part of Konva framework or as a separate module.

    enhancement 
    opened by lavrton 26
  • Light line issue

    Light line issue

    I am creating a project using your awesome KonvaJS framework. However I am having an issue: I am drawing a soundwave with a lot of rectangles put together using this code:

                var rectangle = new Konva.Rect({
                    x: x,
                    y: y,
                    width: 1,
                    height: h,
                    perfectDrawEnabled: false
                });
    
    screen shot 2018-08-06 at 00 01 50

    As you can see in the first image, it has light grey lines over it and I am not sure why. But it has to be solid black like in this example:

    screen shot 2018-08-06 at 00 02 33

    Any ideas about this?

    opened by NPetrovs 25
  • Konva 3.1.7 trouble importing Typescript module.

    Konva 3.1.7 trouble importing Typescript module.

    Hi, I have trouble importing Konva 3.1.7 in my typescript project. Using VSCode 1.32 and Typescript 3.3.3

    Trying with asterisk imports:

    import * as Konva from 'konva';
    
    const stage: Konva.Stage
    // Namespace '"...node_modules/konva/types/index-types"' has no exported member 'Stage'
    

    Trying with default imports:

    import Konva from 'konva';
    
    const stage: Konva.Stage
    // Cannot find namespace 'Konva'
    

    I installed Konva with yarn: yarn add [email protected] (the default listed version is 2.6.0) Here's my tsconfig:

    {
      "compilerOptions": {
        "outDir": "./build",
        "sourceMap": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "jsx": "react",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noImplicitAny": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "baseUrl": ".",
        "target": "es6",
        "allowJs": false,
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true
      },
      "include": ["src/**/*.ts", "src/**/*.tsx"],
      "exclude": ["build", "node_modules", ".git", ".vscode"]
    }
    
    opened by skid 24
  • drawImage doesn't work

    drawImage doesn't work

    When I use drawImage for the layer, it will not take effect.

    Examples are as follows:

    https://codesandbox.io/s/unruffled-rosalind-vnytp?file=/src/index.js

    opened by yinguangyao 22
  • using OffscreenCanvas for performance optimisation

    using OffscreenCanvas for performance optimisation

    Hi

    I think it would be great to implement https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas support in future version.

    I know you have some tricks for optimization however it is more native method.

    Some explanation from google https://developers.google.com/web/updates/2018/08/offscreen-canvas

    enhancement 
    opened by kirill3333 20
  • Draw text stroke before text fill

    Draw text stroke before text fill

    This is a feature request for text ... I'd like to be able to write text with only an outer stroke (no inner stroke).

    The main issue with the current fillStroke function is that the stroke gets added to the inside of the font, which makes the font skinnier and hard to read at small sizes.

    Here is an example of what Konva does (top text is no stroke, bottom is with a stroke) screen shot 2019-02-22 at 3 16 35 pm

    If the stroke is only applied to the outside of the text, it could look like this. Note how the text is much more readable in this case: screen shot 2019-02-22 at 3 14 40 pm

    Basically, I'd like to achieve the same result as a text shadow with offset, but the offset should be 360 degrees around the text.

    Is this possible somehow?

    Thanks for an amazing project!

    enhancement 
    opened by justswim 18
  • How to attach the Konvajs Transformer to multiple shapes without groupping them?

    How to attach the Konvajs Transformer to multiple shapes without groupping them?

    I'm working on a Konvajs based designer tool project where u'll be able to select multiple shapes with MouseClick+CntrlKey.

    The idea is that once the first shape is selected, the Transformer is created an attached to it. If u're holding CntrlKey and click over other shapes the Transformer will be updated (with forceUpdate()) to include those too.

    Thanks to this tutorial I've managed to attach the Transformer to a newly created temporary group where all shapes are being added one by one when they get selected. As soon as u clear the selection, the shapes are removed from that group.

    The problem with adding shapes to a temporary group is that u cannot keep the shapes original z-index during the time they still in that group, so they all are moved to the top. That's why I'm trying to find a way to attach the Transformer to multiple shapes directly without adding them into a group.

    Any help will be appreciated! Thanks in advance!

    enhancement 
    opened by enriqueerrando 17
  • Typescript definitions broken for 3.2.3 release and TypeScript 3.3.3

    Typescript definitions broken for 3.2.3 release and TypeScript 3.3.3

    I just pulled the latest version for a new project - I've been using konva 2.x on a previous project.

    First issue - types are missing for the filters in index-types.d.ts. I've got a fix for that and will make a PR for it shortly. Filters need explicit types to make things happy it seems:

     export const Filters: {
        Blur: typeof Blur;
        Brighten: typeof Brighten;
        Contrast: typeof Contrast;
        Emboss: typeof Emboss;
        Enhance: typeof Enhance;
        Grayscale: typeof Grayscale;
        HSL: typeof HSL;
        HSV: typeof HSV;
        Invert: typeof Invert;
        Kaleidoscope: typeof Kaleidoscope;
        Mask: typeof Mask;
        Noise: typeof Noise;
        Pixelate: typeof Pixelate;
        Posterize: typeof Posterize;
        RGB: typeof RGB;
        RGBA: typeof RGBA;
        Sepia: typeof Sepia;
        Solarize: typeof Solarize;
        Threshold: typeof Threshold;
      };
    

    Second issue is

    Property 'children' in type 'Stage' is not assignable to the same property in base type 'Container'.
      Type 'Collection<BaseLayer>' is not assignable to type 'Collection<Node<NodeConfig>>'.
        Types of property 'push' are incompatible.
          Type '(item: BaseLayer) => void' is not assignable to type '(item: Node<NodeConfig>) => void'.
            Types of parameters 'item' and 'item' are incompatible.
              Type 'Node<NodeConfig>' is not assignable to type 'BaseLayer'.
                Property 'canvas' is missing in type 'Node<NodeConfig>'.ts(2416)
    

    Stage.ts redefines the children property to be of a different type. Container, which defines children as Collection<Child extends Node> Stage extends Container, which defines children as Collection<BaseLayer>.

    These two types are incompatible and so TS throws up the error message.

    opened by emlynmac 16
  • Finalize the fork

    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.

    opened by ghost 16
  • Make canvas (nodes) optionally opaque/transparent

    Make canvas (nodes) optionally opaque/transparent

    Feature request

    It would improve performance if (nodes) can be marked as "alpha: false". This might only apply if the node uses a canvas on its own because it's (the stage, a layer, cached, etc.)

    In Konva it's not possible to tell the main canvas (either in the layer or stage object) that it should opaque and not render any alpha values. As it might be useful to cache some transparent nodes (which use offscreen canvas for buffering) - its important to explicitly mark only specific nodes as "alpha:false". This should improve drawing performance in the browser and in node-canvas.

    related issues

    https://github.com/konvajs/konva/issues/132 https://github.com/konvajs/konva/pull/350

    Sources

    Browser

    If your application uses canvas and doesn't need a transparent backdrop, set the alpha option to false when creating a drawing context with HTMLCanvasElement.getContext(). This information can be used internally by the browser to optimize rendering.

    https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#turn_off_transparency

    node-canvas

    RGB24 Like RGBA32, but the 8 alpha bits are always opaque. This format is always used if the alpha context attribute is set to false (i.e. canvas.getContext('2d', {alpha: false})). This format can be faster than RGBA32 because transparency does not need to be calculated.

    https://github.com/Automattic/node-canvas

    There was "moz-opaque" attribute in the past, which is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/mozOpaque?retiredLocale=de

    opened by flohall 4
  • how to fix yarn add react-konva konva run fail

    how to fix yarn add react-konva konva run fail

    Server Error Error: konva tried to access canvas, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

    Required package: canvas Required by: konva@npm:8.3.14 (via /Users/nitithorn/Desktop/flow/frontend/.yarn/cache/konva-npm-8.3.14-37d7faf6ad-a14ace4b62.zip/node_modules/konva/cmj/)

    Require stack:

    /Users/nitithorn/Desktop/flow/frontend/.yarn/cache/konva-npm-8.3.14-37d7faf6ad-a14ace4b62.zip/node_modules/konva/cmj/index-node.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/react-konva-virtual-0eb93ea69c/0/cache/react-konva-npm-18.2.3-225def8889-b18868527e.zip/node_modules/react-konva/lib/ReactKonva.js /Users/nitithorn/Desktop/flow/frontend/.next/server/pages/workflow/builder.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/require.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/next-server.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/next.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/server/lib/start-server.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/cli/next-dev.js /Users/nitithorn/Desktop/flow/frontend/.yarn/virtual/next-virtual-b7d3d61fcc/0/cache/next-npm-12.1.6-c0598c390e-670d544fd4.zip/node_modules/next/dist/bin/next

    opened by markLabel9822 1
  • Issue with transformer size for Line elements

    Issue with transformer size for Line elements

    Hello,

    First of all, thank you for the amazing framework! It's a pleasure to use it :)

    I think my question can be a bit obvious, but I give up finding a solution. Is it possible somehow to avoid margins (on image below) for lines? Looks like margin size depends on "strokeWidth" value (large "strokeWidth" value - larger margin).

    image

    Looks like "strokeWidth" effects on "getClientRect" method. Therefore, transformer looks bigger than line:

    image

    Is there a way to avoid such behavior? The desired behavior is to have transformer size matched to line size.

    Thank you!

    opened by AlexanderPashuk 0
  • How can I detect a node outside or inside a rect-like area?

    How can I detect a node outside or inside a rect-like area?

    Hi, thank you very much for this awsome lib, I want to implement a function like the picture below, but I have some questions for help, Snip20221224_19 1、I think this gray area is a Stage, but what this white area is , is it a Rect or not? 2、If it's a Rect, how can I know the node is inside it or not? How can I make the part which inside the Rect highlight and the other part has different css. 3、If I have a preview page of this editor page, how can I make the preview page only display the content in the white Rect,but the content outside the rect hide in the stage?

    opened by xinnai 1
  • Maximum call stack size exceeded when I click transformer's rects without dragging them

    Maximum call stack size exceeded when I click transformer's rects without dragging them

    I want to add node into transformer's nodes arrary by click, so my code is like this:

    stage.on('click', e => {
          tr.nodes([e.target])
    })
    

    It worked well until I just click transformer's rects WITHOUT dragging them ! Terminal told me this and then my app turn out to be retard:

    Uncaught RangeError: Maximum call stack size exceeded 
    

    So I have to add more code like this:

    stage.on('click', e => {
        // @ts-ignore
        if (e.target.parent === tr) {
            return
        }
    })
    

    And I have to use // @ts-ignore to skip ts warnnig there .... Any plan to avoid such condition here?

    opened by gyhyfj 0
  • Konva swallowing button 4 and 5 (mouse backward and mouse forwards buttons)

    Konva swallowing button 4 and 5 (mouse backward and mouse forwards buttons)

    Hello, and thank you for the great library!

    I would like to be able to navigate backward and forwards with an external mouse also over a Konva canvas, but it seems like Konva is swallowing these buttons (e.g. in some way calling preventDefault()).

    Reproduce

    If you go to any Konva demo and click on the mouse backward or mouse forward button the browser window will not navigate to the previous or next page. In this example specifically, if you click on these buttons over the grey area, it will brush the canvas, just as if you clicked with your primary button.

    opened by greenbech 0
Releases(2.1.3)
  • 2.1.3(May 17, 2018)

    Fixed

    • Konva.Transformer automatically track shape changes
    • Konva.Transformer works with shapes with offset too
    • Cursor fixes for Konva.Transformer
    • Fixed lineHeight behavior for Konva.Text
    • Some performance optimizations for Konva.Text
    • Better wrap algorithm for Konva.Text
    • fixed Konva.Arrow with tension != 0
    • Some other fixes for Konva.Transformer
    Source code(tar.gz)
    Source code(zip)
    konva-v2.1.3-documentation.zip(1.42 MB)
  • 2.0.3(Apr 21, 2018)

    Added

    • Typescript defs for Konva.Transformer
    • Typescript defs for globalCompositeOperation

    Changes

    • Fixed flow for contextmenu event. Now it will be triggered on shapes too
    • find() method for Containers can use a function as a parameter

    Fixed

    • some bugs fixes for group.getClientRect()
    • Konva.Arrow will not draw dash for pointers
    • setAttr will trigger change event if new value is the same Object
    • better behavior of dblclick event when you click fast on different shapes
    • stage.toDataURL will use pixelRatio = 1 by default.
    Source code(tar.gz)
    Source code(zip)
    konva-v2.0.3-documentation.zip(1.44 MB)
  • 2.0.0(Mar 15, 2018)

    Added

    • new Konva.Transformer. It is a special group that allow simple resizing and rotation of a shape.
    • Add ability to remove event by callback node.off('event', callback).
    • new Konva.Filters.Contrast.
    • new Konva.Util.haveIntersection() to detect simple collusion
    • add Konva.Text.ellipsis to add '…' to text string if width is fixed and wrap is set to 'none'
    • add gradients for strokes

    Changed

    • stage events are slightly changed. mousedown, click, mouseup, dblclick, touchstart, touchend, tap, dbltap will be triggered when clicked on empty areas too

    Fixed

    • Some typescript fixes
    • Pixelate filter fixes
    • Fixes for path data parsing
    • Fixed shadow size calculation

    Removed

    • Some deprecated methods are removed. If previous version was working without deprecation warnings for you, this one will work fine too.
    Source code(tar.gz)
    Source code(zip)
  • 1.6.0(Apr 21, 2017)

    Added

    • support for lineDashOffset property for Konva.Shape.
    • support of globalCompositeOperation for Konva.Shape

    Fixed

    • getAllIntersections now works ok for Text shapes (https://github.com/konvajs/konva/issues/224)

    Changed

    • Konva a bit changed a way to detect pointer position. Now it should be OK to apply css transform on Konva container. https://github.com/konvajs/konva/pull/215
    Source code(tar.gz)
    Source code(zip)
    konva-v1.6.0-documentation.zip(654.24 KB)
  • 1.4.0(Feb 7, 2017)

  • 1.3.0(Jan 10, 2017)

    Added

    • new align value for Konva.Text and Konva.TextPath: justify
    • new property for Konva.Text and Konva.TextPath: textDecoration. Right now it sports only '' (no decoration) and 'underline' values.
    • new property for Konva.Text: letterSpacing
    • new event contentContextmenu for Konva.Stage
    • align support for Konva.TextPath
    • new method toCanvas() for converting a node into canvas element

    Changed

    • changing a size of Konva.Stage will update it in async way (via batchDraw).
    • shadowOffset respect pixel ratio now

    Fixed

    • Fixed bug when Konva.Tag width was not changing its width dynamically
    • Fixed "calling remove() for dragging shape will throw an error"
    • Fixed wrong opacity level for cached group with opacity
    • More consistent shadows on HDPI screens
    • Fixed memory leak for nodes with several names
    Source code(tar.gz)
    Source code(zip)
    konva-v1.3.0-documentation.zip(651.47 KB)
  • 1.1.0(Aug 21, 2016)

  • 1.0.0(Jul 5, 2016)

  • 0.12.4(Apr 19, 2016)

  • 0.12.2(Mar 31, 2016)

  • 0.11.1(Jan 16, 2016)

    Fixed

    • correct Konva.Arrow drawing. Now it works better.
    • Better support for dragging when mouse out of stage
    • Better corner radius for Label shape
    • contentTap event for stage

    Added

    • event delegation. You can use it in this way: layer.on('click', 'Circle', handler);
    • new node.findAncestors(selector) and node.findAncestor(selector) functions
    • optional selector parameter for stage.getIntersection and layer.getIntersection
    • show warning message if several instances of Konva are added to page.

    Changed

    • moveTo and some other methods return this
    • getAbsolutePosition support optional relative parent argument (useful to find absolute position inside of some of parent nodes)
    • change event will be not fired if changed value is the same as old value
    Source code(tar.gz)
    Source code(zip)
    konva-v0.11.1-documentation.zip(638.93 KB)
  • 0.10.0(Oct 27, 2015)

    Added

    • RGBA filter. Thanks to @codefo
    • stroke and fill support for Konva.Sprite

    Fixed

    • Correct calculation in getClientRect method of Konva.Line and Konva.Container.
    • Correct toObject() behaviour for node with attrs with extended native prototypes
    • Fixed bug for caching where buffer canvas is required

    Changed

    • Dragging works much better. If your pointer is out of stage content dragging will still continue.
    • Konva.Node.create now works with objects.
    • Konva.Tween now supports tweening points to state with different length
    Source code(tar.gz)
    Source code(zip)
    docs.zip(607.88 KB)
  • 0.9.5(May 28, 2015)

    Fixed

    • to don't throw error if no onFinish callback
    • HDPI support for desktop
    • Fix bug when filters are not correct for HDPI
    • Fix bug when hit area is not correct for HDPI
    • Fix bug for incorrect getClientRect calculation
    • Repair fill gradient for text

    Changed

    • context wrapper is more capable with native context. So you can use context.fillStyle property in your sceneFunc without accessing native context.
    • toDataURL now handle pixelRatio. you can pass config.pixelRatio argument
    • Correct clone() for custom nodes
    • FastLayer now can have transforms
    • stage.toDataURL() method now works in synchronous way. So callback argument is not required.
    • container.find(selector) method now have validation step. So if you forgot to add # or . you will see a warning message in the console.

    Added

    • new Konva.Image.fromURL method

    Deprecated

    • fillRed, fillGreen, fillBlue, fillAlpha are deprecated. Use fill instead.
    • strokeRed, strokeGreen, strokeBlue, strokeAlpha are deprecated. Use stroke instead.
    • shadowRed, shadowGreen, shadowBlue, shadowAlpha are deprecated. Use shadow instead.
    • dashArray is deprecated. Use dash instead.
    • drawFunc is deprecated. Use sceneFunc instead.
    • drawHitFunc is deprecated. Use hitFunc instead.
    • rotateDeg is deprecated. Use rotate instead.
    Source code(tar.gz)
    Source code(zip)
    docs.zip(620.89 KB)
  • 0.9.0(Feb 27, 2015)

    Fixed

    • cache algorithm has A LOT OF updates.

    Changed

    • scale now affect shadowOffset
    • performance optimization (remove some unnecessary draws)
    • more expected drawing when shape has opacity, stroke and shadow
    • HDPI for caching.
    • Cache should work much better. Now you don't need to pass bounding box {x,y,width,height} to cache method for all buildin Konva shapes. (only for your custom Konva.Shape instance).
    • Tween now supports color properties (fill, stroke, shadowColor)

    Added

    Source code(tar.gz)
    Source code(zip)
    api_docs.zip(1.06 MB)
Owner
konva
2d canvas framework
konva
A javascript library that extends D3.js to enable fast and beautiful visualizations.

d3plus D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations. Installi

D3plus 1.6k Dec 2, 2022
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.

Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply

nethe550 1 Apr 13, 2022
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.8k Jan 9, 2023
An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

Joseph Huckaby 8 Dec 1, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Jan 4, 2023
Dynamic HTML5 visualization

Envision.js Fast interactive HTML5 charts. http://groups.google.com/group/envisionjs/ Features Modern Browsers, IE 6+ Mobile / Touch Support Pre-built

HumbleSoftware 1.6k Dec 3, 2022
JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A

null 18 Nov 12, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

中文 README F2 is born for mobile, developed for developers as well as designers. It is Html5 Canvas-based, and is also compatible with Node.js, Weex an

AntV team 7.8k Dec 31, 2022
📱📈An elegant, interactive and flexible charting library for mobile.

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README 在此衷心感谢《The Grammar of Graphics》的作者

AntV team 7.8k Dec 27, 2022