[Vuejs]-How to generate Canvas layer with on click button

by

0👍

✅

var mainCanvas = new Vue({
  el: '#main', // the element where the method wil lrender the canvas to
  data: {
    name: 'Vue.js'
  },
  methods: {
    handleClick: function (event) { // handleClick is the method name for the button
      var stage = new Konva.Stage({ // this line till the stage.add() line renders the draggable square
        container: 'obszarroboczy',
        width: 500,
        height: 500
      });

      var layer = new Konva.Layer();

      var rect = new Konva.Rect({
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
      });

      layer.add(rect);

      stage.add(layer);
    }
  }
});

I added comments to explain what certain important lines does but you can check out the official KonvaJS Docs in GitHub for a more detailed explanation on what each line above does.

Leave a comment