Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

konva

Package Overview
Dependencies
Maintainers
1
Versions
212
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

konva

![Konva logo](https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png)

  • 1.7.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
388K
decreased by-11.29%
Maintainers
1
Weekly downloads
 
Created

What is konva?

Konva is a 2D canvas library for JavaScript that enables developers to create complex and interactive graphics on the web. It is built on top of the HTML5 Canvas API and provides a high-level API for drawing shapes, images, text, and more. Konva is particularly useful for creating animations, interactive applications, and data visualizations.

What are konva's main functionalities?

Drawing Shapes

This feature allows you to draw various shapes such as circles, rectangles, and polygons. The code sample demonstrates how to create a stage, add a layer, and draw a red circle with a black border.

const stage = new Konva.Stage({ container: 'container', width: 500, height: 500 }); const layer = new Konva.Layer(); const circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 70, fill: 'red', stroke: 'black', strokeWidth: 4 }); layer.add(circle); stage.add(layer);

Handling Events

Konva provides an easy way to handle user interactions like clicks, mouse movements, and touch events. The code sample shows how to add a click event listener to a circle shape.

circle.on('click', function () { alert('Circle clicked!'); });

Animations

Konva supports animations, allowing you to create dynamic and interactive graphics. The code sample demonstrates how to animate a circle's position over time.

const anim = new Konva.Animation(function (frame) { circle.x(Math.sin(frame.time * 2 * Math.PI / 1000) * 100 + stage.width() / 2); }, layer); anim.start();

Transformations

You can apply transformations like scaling, rotation, and dragging to shapes. The code sample shows how to make a circle draggable and log a message during the drag event.

circle.draggable(true); circle.on('dragmove', function () { console.log('Circle is being dragged'); });

Text and Images

Konva allows you to add text and images to your canvas. The code sample demonstrates how to add a text element and an image to a layer.

const text = new Konva.Text({ x: 10, y: 10, text: 'Hello, Konva!', fontSize: 30, fontFamily: 'Calibri', fill: 'green' }); layer.add(text); const imageObj = new Image(); imageObj.onload = function () { const konvaImage = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 100, height: 100 }); layer.add(konvaImage); layer.draw(); }; imageObj.src = 'path/to/image.jpg';

Other packages similar to konva

Keywords

FAQs

Package last updated on 19 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc