Press "Enter" to skip to content

JavaScript Library For Drawing Complex Canvas Drawings With Vue

Vue Konva is a JavaScript library for drawing complex canvas drawings using Vue. Provides descriptive and interactive links to the Conva framework.

All vue-konva components are compatible with Konva components of the same name with the “v-” prefix. All parameters available to Konva objects can be added as a configuration in the brace for the corresponding vue-konva components.

The basic shapes are: v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, v-path, v-normal- ribbed. You can also create a custom shape.

Angular Module To Draw On Images | Ngx Image Drawing

How to make use of it:

Install and download:

$ npm install vue-konva konva --save

Import and use of Vue Konva.

import Vue from 'vue'
import VueKonva from 'vue-konva'


Example app to draw a basic astral drawing.

    <v-stage ref="stage"
      <v-layer ref="layer">
          v-for="item in list"
      <v-layer ref="dragLayer"></v-layer>

const width = window.innerWidth;
const height = window.innerHeight;
let vm = {};
export default {
  data() {
    return {
      list: [],
      configKonva: {
        width: width,
        height: height
  methods: {
    handleDragstart(starComponent) {
      const shape = starComponent.getStage();
      const dragLayer = vm.$refs.dragLayer.getStage();
      const stage = vm.$refs.stage.getStage();
      // moving to another layer will improve dragging performance
      starComponent.config.shadowOffsetX = 15;
      starComponent.config.shadowOffsetY = 15;
      starComponent.config.scaleX = starComponent.config.startScale * 1.2;
      starComponent.config.scaleY = starComponent.config.startScale * 1.2;
    handleDragend(starComponent) {
      const shape = starComponent.getStage();
      const layer = vm.$refs.layer.getStage();
      const stage = vm.$refs.stage.getStage();
        duration: 0.5,
        easing: Konva.Easings.ElasticEaseOut,
        scaleX: starComponent.config.startScale,
        scaleY: starComponent.config.startScale,
        shadowOffsetX: 5,
        shadowOffsetY: 5
  mounted() {
    vm = this;
    for (let n = 0; n < 30; n++) {
      const scale = Math.random();
      const stage = vm.$refs.stage.getStage();
        x: Math.random() * stage.getWidth(),
        y: Math.random() * stage.getHeight(),
        rotation: Math.random() * 180,
        numPoints: 5,
        innerRadius: 30,
        outerRadius: 50,
        fill: "#89b717",
        opacity: 0.8,
        draggable: true,
        scaleX: scale,
        scaleY: scale,
        shadowColor: "black",
        shadowBlur: 10,
        shadowOffsetX: 5,
        shadowOffsetY: 5,
        shadowOpacity: 0.6,
        startScale: scale

Drawing Complex Graphics Using Vue, Vue Konva Plugin/Github

See Demo And Download

Official Website(konvajs): Click Here

This superior jQuery/javascript plugin is developed by konvajs. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.