Paper js event example incorrectly tests for mouseenter

Question

I'm using the code from mouseenter example, but instead of view.center place the circle at (50;50)

When the cursor is above the circle, the circle should become red. But it works only with upper left part of it.

Tested in Firefox, Windows 8

$(document).ready(() =>
{
    var canvas = document.getElementById("mainCanvas")
    paper.setup(canvas)
    console.log("creating circle")
    var path = new paper.Path.Circle({
        center: new paper.Point(50,50),
        radius: 25,
        fillColor: 'black'
    });
    console.log("created circle")
    // When the mouse enters the item, set its fill color to red:
    path.on('mouseenter', function () {
        this.fillColor = 'red';
    });
    // When the mouse leaves the item, set its fill color to black:
    path.on('mouseleave', function () {
        this.fillColor = 'black';
    });
})

canvas {
    border-style:double
}

<script src="https://code.jquery.com/jquery-2.1.3.js"> </script>
<script src = https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.js></script>
<canvas id = "mainCanvas" resize></canvas>
<div>!!</div>

score 2 · Accepted Answer · edited May 23 '17 at 10:30

2

Are you using the CSS to correctly resize the canvas? If the pixels in a HiDPI paper.js canvas don't align then the hit-test will be off:

https://stackoverflow.com/a/29103200/1163708

edited May 23 '17 at 10:30

Community

1
1

answered Mar 23 '17 at 08:25

Jürg Lehni

1,677
13
16

score 0 · Answer 2 · answered Mar 23 '17 at 07:14

0

Removing resize from canvas fixes it. Still interested, if paper.js can work with resized canvas

answered Mar 23 '17 at 07:14

user2136963

2,526
3
22
41

Paper js event example incorrectly tests for mouseenter

2 Answers2