Skip to content

Paper.js

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Installation 

npm install paper

Vue Component example 

<template>
  <div>
    <canvas ref="canvas-user"></canvas>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop, Ref, Watch, Emit} from 'vue-property-decorator';
import * as paper from 'paper';

@Component
export default class MediaPlayer extends Vue {

  @Ref('canvas-user')
  readonly canvasUser!: HTMLCanvasElement;

  paperUser!: paper.PaperScope;

  mounted() {
    this.paperUser = new paper.PaperScope();
    this.paperUser.setup(this.canvasUser);

    const path = new this.paperUser.Path();
    path.strokeColor = new this.paperUser.Color('black');

    const start = new paper.Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add(new this.paperUser.Point([200, -50])));
  }

  // ...
}
</script>

See also

Favorite site