CODEWITHSUNDEEP
javascriptpaperjs
Josh Reback
Josh Reback

Reputation: 569

Paper.js mouse events are not working

My code is very simple, lifted straight from the tutorial. Here is index.html:

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper-full.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas" src="js/myScript.js"></script>
</head>
<body>
  <canvas id="myCanvas" resize></canvas>
</body>
</html>

and here is js/myscript.js:

var myPath = new Path();
myPath.strokeColor = 'black';

myPath.add(new Point(200, 200));
myPath.add(new Point(100, 100));

function onMouseDown(event) {
  console.log('You pressed the mouse!');
}

function onMouseDrag(event) {
  console.log('You dragged the mouse!');
}

function onMouseUp(event) {
  console.log('You released the mouse!');
}

I'm using v0.11.4 of paper.js. The path shows up on the screen properly, but the console is empty when I click around. Am I setting something up improperly? Please let me know. Thank you!

Upvotes: 3

Views: 1692

Answers (1)

arthur.sw
arthur.sw

Reputation: 11619

You can read the great paper.js tutorials, especially using javascript directly > working with tools :

paper.install(window);
window.onload = function() {
    paper.setup('myCanvas');
    // Create a simple drawing tool:
    var tool = new Tool();
    var path;

    // Define a mousedown and mousedrag handler
    tool.onMouseDown = function(event) {
        path = new Path();
        path.strokeColor = 'black';
        path.add(event.point);
    }

    tool.onMouseDrag = function(event) {
        path.add(event.point);
    }
}

Upvotes: 4

Related Questions