index.html

<!DOCTYPE html>
<html lang="en">
  <head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8" />
<title>
  Konva - JavaScript 2d canvas
  library
</title>
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=5"
/>
<link rel="canonical" href="https://konvajs.org/index.html" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff" /> 
<link rel="stylesheet" href="/css/style.css">

<link
  href="//fonts.googleapis.com/css?family=Lato:300,700"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="//fonts.googleapis.com/css?family=Source+Code+Pro:400,700"
  rel="stylesheet"
  type="text/css"
/>
<script
  async
  defer
  data-domain="konvajs.org"
  src="https://plausible.io/js/plausible.js"
></script>
<link rel="alternate" href="/atom.xml" title="Konva.js - JavaScript 2d canvas library"> <meta name="description" content="Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.">
<meta property="og:type" content="website">
<meta property="og:title" content="Konva.js - JavaScript 2d canvas library">
<meta property="og:url" content="https://konvajs.org/index.html">
<meta property="og:site_name" content="Konva.js - JavaScript 2d canvas library">
<meta property="og:description" content="Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://konvajs.org/logo.png">
<meta property="article:published_time" content="2024-12-23T14:29:37.860Z">
<meta property="article:modified_time" content="2024-12-23T14:29:37.860Z">
<meta property="article:author" content="Anton Lavrenov">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://konvajs.org/logo.png">
<meta name="twitter:site" content="@lavrton"> 

  </head>
  <body>
    <header id="header">
  <div class="outer">
    <div class="inner">
      <div id="logo-wrap">
        <a href="/" id="logo">Konva</a>
        <a id="main-nav-toggle"></a>
      </div>
      <nav id="main-nav">
        <ul id="main-nav-list">
          
          <li class="main-nav-item">
            <a href="/docs/index.html" class="main-nav-link">
              Tutorials
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/docs/sandbox/index.html" class="main-nav-link">
              Demos
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/api/Konva.html" class="main-nav-link">
              API docs
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/docs/react/Intro.html" class="main-nav-link">
              React
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/docs/vue/index.html" class="main-nav-link">
              Vue
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/docs/svelte/index.html" class="main-nav-link">
              Svelte
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/docs/donate.html" class="main-nav-link">
              ❤️ Support Konva
            </a>
          </li>
          
          <li class="main-nav-item">
            <a href="/docs/support.html" class="main-nav-link">
              Need help?
            </a>
          </li>
          
          <li class="main-nav-item">
            <div id="search-container" />
          </li>
          <li class="main-nav-item">
            <a
              href="https://lavrton.com/consulting"
              title="Consulting"
              target="_blank"
              class="main-nav-link"
              style="
                color: white;
                background: #078c34;
                padding: 10px;
                border-radius: 10px;
              "
              >Consulting</a
            >
          </li>
        </ul>

        <a
          href="https://github.com/konvajs/konva"
          id="github-btn"
          title="GitHub"
          target="_blank"
        ></a>
        <a
          href="https://twitter.com/lavrton"
          id="twitter-btn"
          title="Twitter"
          target="_blank"
        ></a>
        <!--
          <a id="search-btn" class="st-search-launcher" title="Search"></a>
        -->
      </nav>
    </div>
  </div>
</header>
 <div id="banner">
  <div class="outer">
    <div class="inner" style="text-align: center;">
      <h1 id="banner-title">
        Konva.js - HTML5 2d canvas js library for desktop and mobile
        applications
      </h1>
      <pre
        style="
          padding: 10px;
          margin-top: 14px;
          line-height: 16px;
          width: 170px;
          display: inline-block;
        "
      >
npm install konva</pre
      >

      <div id="banner-getting-started">
        <a class="btn" href="/docs/index.html">Get started</a>
      </div>
      <div id="banner-share">
        <!-- GitHub Star -->
<iframe
  src="https://ghbtns.com/github-btn.html?user=konvajs&repo=konva&type=watch&count=true"
  allowtransparency="true"
  frameborder="0"
  scrolling="0"
  width="110px"
  height="20px"
  class="alignleft"
></iframe>
<!-- Tweet button -->
<!-- <a
  href="https://twitter.com/share"
  class="twitter-share-button"
  data-url="https://konvajs.org/"
  data-text="Konva - is a 2d html5 canvas library for desktop and mobile applications."
  data-hashtags="konvajs,javascript"
  >Tweet</a
> -->
<!-- Twitter Follow Button -->
<!-- <a
  href="https://twitter.com/lavrton"
  class="twitter-follow-button"
  data-show-count="false"
  >Follow @lavrton</a
> -->

        <div><!-- Begin Mailchimp Signup Form -->

<!-- <iframe
  class="mj-w-res-iframe"
  frameborder="0"
  scrolling="no"
  marginheight="0"
  marginwidth="0"
  src="https://app.mailjet.com/widget/iframe/7P23/MU3"
  style="height: 70px; margin: auto; width: 450px"
></iframe> -->

<!-- <script
  type="text/javascript"
  src="https://app.mailjet.com/statics/js/iframeResizer.min.js"
></script> -->

<!--End mc_embed_signup-->
</div>
      </div>
    </div>
  </div>
</div>

<div class="intro-wrap"><div class="outer"><h2 class="intro-features">Features</h2><div class="features"><div class="feature"><img src="/assets/features/undraw_abstract_x68e.svg"/><h3 class="desc">Object Oriented API with support of many shapes</h3></div><div class="feature"><img src="/assets/features/undraw_file_sync_ot38.svg"/><h3 class="desc">Support for desktop and mobile devices</h3></div><div class="feature"><img src="/assets/features/undraw_animating_1rgh.svg"/><h3 class="desc">Animations and tweens</h3></div><div class="feature"><img src="/assets/features/undraw_fitting_pieces_cli3.svg"/><h3 class="desc">Node nesting, grouping and event bubbling</h3></div><div class="feature"><img src="/assets/features/undraw_image_viewer_wxce.svg"/><h3 class="desc">Hight quality exports into data URLs, image data, or image objects</h3></div><div class="feature"><img src="/assets/features/undraw_options_2fvi.svg"/><h3 class="desc">Nice ready-to-use filters</h3></div><div class="feature"><img src="/assets/features/undraw_voice_interface_eckp.svg"/><h3 class="desc">Native integration with web frameworks such as React, Vue and Svelte</h3></div><div class="feature"><img src="/assets/features/undraw_drag_5i9w.svg"/><h3 class="desc">Built-in Drag&drop support</h3></div></div><h2 class="intro-features">Demo</h2><iframe src="/downloads/code/main-demo.html" style="width:100%; height:600px; box-shadow: 0 0 10px grey; border-radius: 4px; overflow:hidden;"></iframe><h2 class="intro-features">Who is using Konva?</h2><div class="grid-container"><div class="grid-item"><a href="https://polotno.dev/?utm_source=konvajs" target="_blank"><div style="background-image: url(/assets/users/polotno.jpg);" class="preview"></div><div class="description"><h5 class="name">Polotno</h5><p>SDK for making design editors for the web</p></div></a></div><div class="grid-item"><a href="https://smmplanner.com/home/sc" target="_blank"><div style="background-image: url(/assets/users/smmplanner.jpg);" class="preview"></div><div class="description"><h5 class="name">SMMplanner</h5><p>Constructor for creating Instagram Stories as part of the scheduled posting</p></div></a></div><div class="grid-item"><a href="https://rowsncolumns.app/" target="_blank"><div style="background-image: url(/assets/users/grid.jpg);" class="preview"></div><div class="description"><h5 class="name">SpreadSheet Grid</h5><p>Excel-like DataGrid component for React JS</p></div></a></div><div class="grid-item"><a href="http://windowcc.com/" target="_blank"><div style="background-image: url(/assets/users/windoor.jpg);" class="preview"></div><div class="description"><h5 class="name">Windoor craft</h5><p>Tool for designing window and door with drag and drop</p></div></a></div><div class="grid-item small"><a href="https://pixteller.com" target="_blank"><div style="background-image: url(/assets/users/pixteller.jpg);" class="preview"></div><div class="description"><h5 class="name">Pixteller</h5><p>A design tool to create or customize any image in seconds</p></div></a></div><div class="grid-item small"><a href="https://getpaddee.com" target="_blank"><div style="background-image: url(/assets/users/paddee.jpg);" class="preview"></div><div class="description"><h5 class="name">Paddee</h5><p>Marketplace and online editor for photo booth templates</p></div></a></div><div class="grid-item small"><a href="https://github.com/Lastik/some-charts" target="_blank"><div style="background-image: url(/assets/users/some-charts.png);" class="preview"></div><div class="description"><h5 class="name">Some-charts</h5><p>JS charting library</p></div></a></div><div class="grid-item small"><a href="https://shelly.dev/" target="_blank"><div style="background-image: url(/assets/users/shelly.jpg);" class="preview"></div><div class="description"><h5 class="name">Shelly</h5><p>A programming language for drawing</p></div></a></div><div class="grid-item small"><a href="https://taggle.so.io/" target="_blank"><div style="background-image: url(/assets/users/yokanban.jpg);" class="preview"></div><div class="description"><h5 class="name">Taggle.so</h5><p>A modern project management whiteboard that inspires flow and communication</p></div></a></div><div class="grid-item small"><a href="https://boardos.online" target="_blank"><div style="background-image: url(/assets/users/boardos.jpg);" class="preview"></div><div class="description"><h5 class="name">BoardOS</h5><p>Online whiteboard collaboration system</p></div></a></div><div class="grid-item small"><a href="https://app.vokal.co/editor" target="_blank"><div style="background-image: url(/assets/users/vokal.jpg);" class="preview"></div><div class="description"><h5 class="name">Vokal</h5><p>Create podcast video snippets for social media</p></div></a></div><div class="grid-item small"><a href="https://www.facetache.com/" target="_blank"><div style="background-image: url(/assets/users/moustache.jpg);" class="preview"></div><div class="description"><h5 class="name">facetache</h5><p>Add moustaches to photos!</p></div></a></div><div class="grid-item small"><a href="https://www.blueletterbible.org/smark/index.cfm" target="_blank"><div style="background-image: url(/assets/users/scripture-mark.jpg);" class="preview"></div><div class="description"><h5 class="name">ScriptureMark</h5><p>Interact with Bible text on a canvas</p></div></a></div><div class="grid-item small"><a href="https://lets-role.com/" target="_blank"><div style="background-image: url(/assets/users/lets-role.jpg);" class="preview"></div><div class="description"><h5 class="name">Let's Role</h5><p>Play TableTop RPG in a virtual environment</p></div></a></div><div class="grid-item small"><a href="http://www.csgoboard.com/board" target="_blank"><div style="background-image: url(/assets/users/csgoboard.jpg);" class="preview"></div><div class="description"><h5 class="name">csgoboard</h5><p>Interactive board for Valve's game Counter-Strike</p></div></a></div><div class="grid-item small"><a href="https://www.brainzilla.com/puzzles/jigsaw/" target="_blank"><div style="background-image: url(/assets/users/puzzle.jpg);" class="preview"></div><div class="description"><h5 class="name">brainzilla</h5><p>Online jigsaw puzzle</p></div></a></div><div class="grid-item small"><a href="https://github.com/kirill3333/react-avatar" target="_blank"><div style="background-image: url(/assets/users/avatar.jpg);" class="preview"></div><div class="description"><h5 class="name">react-avatar</h5><p>Load, crop & preview avatar with React</p></div></a></div><div class="grid-item small"><a href="https://mcalus3.github.io/color-wars-web/" target="_blank"><div style="background-image: url(/assets/users/colors-wars.jpg);" class="preview"></div><div class="description"><h5 class="name">Color wars game</h5><p>Hot-seat multiplayer, arcade, with focus on competition</p></div></a></div><div class="grid-item small"><a href="https://www.kuruko.com/design" target="_blank"><div style="background-image: url(/assets/users/kuruko.jpg);" class="preview"></div><div class="description"><h5 class="name">Kuruko</h5><p>Create Custom Wall Art</p></div></a></div><div class="grid-item small"><a href="https://www.opdome.com/" target="_blank"><div style="background-image: url(/assets/users/opdome.jpg);" class="preview"></div><div class="description"><h5 class="name">Opdome</h5><p>Online Picture Dictionary</p></div></a></div><div class="grid-item small"><a href="https://e-cards.shop/de/cards/create/2/1" target="_blank"><div style="background-image: url(/assets/users/e-cards.jpg);" class="preview"></div><div class="description"><h5 class="name">E-cards</h5><p>Online shop for business ecards</p></div></a></div><div class="grid-item small"><a href="https://mystikaze.com/" target="_blank"><div style="background-image: url(/assets/users/mystikaze.jpg);" class="preview"></div><div class="description"><h5 class="name">Mystikaze</h5><p>An online turn-based hex battle strategy game</p></div></a></div><div id="intro-btn-wrap"><a href="https://github.com/konvajs/konva/discussions/1169" target="_blank" rel="noopener" class="add-app">Do you want to add your app here?</a></div></div></div><div class="outer"><div id="intro-btn-wrap"><a id="intro-btn" href="/docs/index.html">Get Started</a></div></div></div>
 <footer id="footer">
  <div class="outer">
      <div class="inner">
          <!-- Begin Mailchimp Signup Form -->

<!-- <iframe
  class="mj-w-res-iframe"
  frameborder="0"
  scrolling="no"
  marginheight="0"
  marginwidth="0"
  src="https://app.mailjet.com/widget/iframe/7P23/MU3"
  style="height: 70px; margin: auto; width: 450px"
></iframe> -->

<!-- <script
  type="text/javascript"
  src="https://app.mailjet.com/statics/js/iframeResizer.min.js"
></script> -->

<!--End mc_embed_signup-->

        </div>
    <div class="inner">
      <div class="footer-resources">
        <h3>Docs</h3>
        <ul>
          <li><a href="/docs">Tutorials</a></li>
          <li><a href="/docs/overview.html">General Overview</a></li>
          <li><a href="/api/Konva.html">API doc</a></li>

          <li><a href="/docs/sandbox/index.html">Demos</a></li>
          <li><a href="/docs/react/index.html">Usage with React</a></li>
          <li><a href="/docs/vue/index.html">Usage with Vue</a></li>
          <li>
            <a href="https://github.com/konvajs/konva/blob/master/CHANGELOG.md"
              >Changelog</a
            >
          </li>
        </ul>
      </div>
      <div class="footer-resources">
        <h3>CHANNELS</h3>
        <ul>
          <li>
            <a href="https://github.com/konvajs/konva" target="_blank"
              >GitHub</a
            >
          </li>
          <li>
            <a
              href="https://stackoverflow.com/questions/tagged/konvajs"
              target="_blank"
              >StackOverflow</a
            >
          </li>
          <li><a href="https://discord.gg/8FqZwVT" target="_blank">Discord chat</a></li>
          <li>
            <a href="https://github.com/konvajs/konva/blob/master/CHANGELOG.md" target="_blank"
              >Changelog</a
            >
          </li>
        </ul>
        
      </div>
      <div class="footer-resources">
          <h3>More</h3>
          <ul>
            <li>
              <a href="/docs/support.html"
                >Need help?</a
              >
            </li>
            <li>
              <a
                href="/docs/donate.html"
                target="_blank"
                >Donate</a>
            </li>
            <li>
              <a
                href="https://polotno.com/"
                target="_blank"
                >Design Editor SDK</a>
            </li>
          </ul>
    </div>
    <div class="inner">
        <div id="footer-copyright">
            &copy; 2025 KonvaJS<br />
          </div>
      <div id="footer-links">
        <a
          href="https://twitter.com/lavrton"
          id="footer-link-twitter"
          class="footer-link"
          target="_blank"
          ><span>Twitter</span></a
        >
        <a
          href="https://github.com/konvajs/konva"
          id="footer-link-github"
          class="footer-link"
          target="_blank"
          ><span>GitHub</span></a
        >
      </div>
    </div>
  
  </div>

  <a class="chat-button" href="https://discord.gg/8FqZwVT" target="_blank" rel="noopener">Join discord chat</a>
  
  <!-- <iframe src="https://discord.com/widget?id=753274212814422176&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> -->
 
</footer>
 
<!-- Disqus -->
<script>
  var disqus_shortname = 'konvajs';
  
  var disqus_url = 'https://konvajs.org/index.html';
  
    (function () {
      var dsq = document.createElement('script');
      dsq.type = 'text/javascript';
      dsq.async = true;
      dsq.defer = true;
      dsq.src = '//go.disqus.com/count.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>


<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
/>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"
></script>
<script type="text/javascript">
  docsearch({
    apiKey: '79bc02f9230d7d4c985e6f543a0a6427',
    appId: '8J5ZKQ6RXR',
    indexName: 'konvajs',
    container: '#search-container',
    algoliaOptions: {
      hitsPerPage: 10,
      // See https://www.algolia.com/doc/api-reference/api-parameters/
    },
    // transformData: function (suggestions) {
    //   // Transform the list of suggestions, and the return the updated list
    //   suggestions.sort(function (a, b) {
    //     if (a.url.indexOf('/api/') >= 0) {
    //       return 1;
    //     } else {
    //       return -1;
    //     }
    //   });
    //   return suggestions.slice(0, 10);
    // },
    debug: false, // Set debug to true if you want to inspect the dropdown
  });
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="/js/retina.min.js"></script>
 
<script src="/js/script.js"></script>

<!-- Google+ -->
<!-- <script type="text/javascript" src="//apis.google.com/js/plusone.js"></script> -->
<!-- Twitter -->
<!-- <script>
  !(function(d, s, id) {
    var js,
      fjs = d.getElementsByTagName(s)[0],
      p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
    }
  })(document, 'script', 'twitter-wjs');
</script> -->

  </body>
  <script type="text/javascript">
    !(function (e, t) {
      ((e = t.createElement('script')).src =
        'https://cdn.convertbox.com/convertbox/js/embed.js'),
        (e.id = 'app-convertbox-script'),
        (e.async = true),
        (e.dataset.uuid = 'db9e320b-6d6c-49c4-ba5c-b29e6d5fc91c'),
        document.getElementsByTagName('head')[0].appendChild(e);
    })(window, document);
  </script>
</html>