I want to create a grid of rectangles that they light up when mouse is over them and I am getting an error on onMouseLeave event (or onMouseEnter, I am not sure yet) of the rect path.
It doesn't happens all the time but mostly when I move the cursor quickly or when the cursor goes outside of the browser.
paper-core.js:12475 Uncaught TypeError: Cannot create property '_canvasStyle' on string 'grey'
at fields.<computed> [as fillColor] (paper-core.js:12475:12)
at item.<computed> [as fillColor] (paper-core.js:12530:16)
at Path2.<anonymous> (percussions.js?t=1659596246337:30:28)
at Path2.emit (paper-core.js:705:20)
at emit (paper-core.js:13349:13)
at emitMouseEvent (paper-core.js:13364:8)
at CanvasView2._handleMouseEvent (paper-core.js:13438:6)
at handleMouseMove (paper-core.js:13230:8)
at docEvents.<computed> (paper-core.js:13300:4)
Here is how I create the scope. I am using ES modules
let paper = new PaperScope()
var canvas = document.getElementById('paperjs');
paper.setup(canvas);
Here is the code
let tileSize = Math.floor((window.innerWidth + window.innerHeight) * .025)
for (var y = 0; y < paper.view.size.height; y += tileSize) {
for (var x = 0; x < paper.view.size.width; x += tileSize) {
let topLeft = new paper.Point(x, y);
let radius = new paper.Size(tileSize, tileSize);
let rect = new paper.Path.Rectangle(topLeft, radius);
rect.fillColor = 'white';
rect.on('mouseenter', function (e) {
this.fillColor = 'grey'
})
rect.on('mouseleave', function (e) {
this.fillColor = 'white'
})
}
}
<body>
<canvas id="paperjs" resize data-paper-hidpi="off"></canvas>
<script type="module" src="/src/main.js"></script>
</body>
body {
min-height: 100vh;
}
canvas[resize] {
width: 100%;
height: 100%;
}
#paperjs {
background-color: white;
position: fixed;
}
Any ideas on why I am getting the aforementioned error onMouseLeave ?
rect.onMouseLeave = function(event) { ...