Skip to content

Instantly share code, notes, and snippets.

@juyal-ahmed
Forked from RobinMoretti/paper-canvas.vue
Created November 21, 2023 11:24
Show Gist options
  • Select an option

  • Save juyal-ahmed/168bd2b9ad08e0eeca6fb7b2b08a9190 to your computer and use it in GitHub Desktop.

Select an option

Save juyal-ahmed/168bd2b9ad08e0eeca6fb7b2b08a9190 to your computer and use it in GitHub Desktop.

Revisions

  1. @RobinMoretti RobinMoretti revised this gist Sep 12, 2023. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions paper-canvas.vue
    Original file line number Diff line number Diff line change
    @@ -5,19 +5,19 @@ import { ref, onMounted } from 'vue'
    const canvas = ref(null)
    onMounted(()=>{
    paper.setup(canvas.value);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add([ 200, -50 ]));
    paper.view.draw();
    paper.setup(canvas.value);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add([ 200, -50 ]));
    paper.view.draw();
    })
    </script>

    <template>
    <main>
    <canvas id="paper-canvas" ref="canvas" resize></canvas>
    </main>
    <main>
    <canvas id="paper-canvas" ref="canvas" resize></canvas>
    </main>
    </template>
  2. @RobinMoretti RobinMoretti revised this gist Sep 12, 2023. No changes.
  3. @RobinMoretti RobinMoretti created this gist Sep 12, 2023.
    23 changes: 23 additions & 0 deletions paper-canvas.vue
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <script setup>
    import paper from "paper"
    import { ref, onMounted } from 'vue'
    const canvas = ref(null)
    onMounted(()=>{
    paper.setup(canvas.value);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var start = new paper.Point(100, 100);
    path.moveTo(start);
    path.lineTo(start.add([ 200, -50 ]));
    paper.view.draw();
    })
    </script>

    <template>
    <main>
    <canvas id="paper-canvas" ref="canvas" resize></canvas>
    </main>
    </template>