<template>
  <div>
    <img src="~asset/img/1.jpg" alt="" srcset="" width="800px">
    <canvas id="myCanvas" resize></canvas>
  </div>
</template>

<script>
import * as paper from 'paper'

export default {
  created() {
  },
  mounted() {
    var canvas = document.getElementById('myCanvas');
    // Create an empty project and a view for the canvas:

    console.log(this.$paper)
    console.log(this.$bus)

		paper.setup(canvas);
		// Create a Paper.js Path to draw a line into it:
		var path = new paper.Path();
		// Give the stroke a color
		path.strokeColor = 'black';
		var start = new paper.Point(100, 100);
		// Move to start and draw a line from there
		path.moveTo(start);
		// Note that the plus operator on Point objects does not work
		// in JavaScript. Instead, we need to call the add() function:
		path.lineTo(start.add([ 200, -50 ]));
		// Draw the view now:
		paper.view.draw();
  }
}
</script>

<style>

</style>