can-vue v1.0.4

can-vue

Vue plugin for HTML5 Canvas + Vue.js, nice and straightforward. Built on Konva.

Getting Started

npm i can-vue

Register the plugin:

import CanVue from 'can-vue'
Vue.use(CanVue)

// instantiate your Vue instance after registering
new Vue({
    // ...options
})

Then, in a single-file component:

<template>
    <can-vue>
        <!-- your canvas content here! -->
    </can-vue>
</template>

You can then add shapes from Konva inside can-vue with draw-shape and some props:

<template>
    <can-vue>
        <draw-shape
            shape="circle"
            x="100"
            y="100"
            width="50"
            height="50"
            opacity="1"
            fill="red"/>
    </can-vue>
</template>

Properties can be reactive:

<template>
    <can-vue>
        <draw-shape
            shape="rect"
            :x="myAnimatingValue"/>
    </can-vue>
</template>

and/or percentages of the canvas space:

<template>
    <can-vue>
        <draw-shape
            shape="rect"
            x="50%"/>
    </can-vue>
</template>

Component API

can-vue

Wrapper for can-vue instance. Creates a div with classes can-vue and wrapper which wrap a canvas element and Vue slot.

Props

draw-shape

Wrapper for a single Konva shape.

Props

What about vue-konva?

Vue-Konva is great, but it's a bit more complicated than can-vue in order to support Konva's full feature set. I was looking for a simple, reactive canvas framework for Vue and, since Vue-Konva isn't reactive, made a quick version of my own.