Draw circles on two different canvases

Question

I have two canvases. I'd like to draw a green circle on the first canvas when clicking on it and a red circle when clicking on the other canvas.

The code below works only for the first canvas. I'd like to know how I can pull off my original idea.

HTML:

<!DOCTYPE html>
<html>
<head>
*** Import jQuery + Paper.js ***
</head>
<body>
    <canvas id='firstCanvas'></canvas>
    <canvas id='secondCanvas'></canvas
</body>
</html>

JS:

$(document).ready(function() {
    paper.install(window);
    paper.setup(document.getElementById('firstCanvas'));
    
    var tool = new Tool();
    tool.onMouseDown = function(event) {
        var c = Shape.Circle(event.point.x, event.point.y, 20);
        c.fillColor = 'green';
};
    paper.view.draw();
});

Thank you in advance.

With kind regards,

Answer 1

You could use PaperScope , and activate each scope with scope.activate() then draw in the activated scope.

It's in the paper.js docs here http://paperjs.org/reference/paperscope/

Draw circles on two different canvases

Question

1 answers

solution1
0 2022-09-27 12:16:29

Draw circles on two different canvases

Question

1 answers

solution1 0 2022-09-27 12:16:29

solution1
0 2022-09-27 12:16:29