Switch button using paper js not work - paperjs

Question

I'm trying to make a simple image editor using canvas. My code is here http://jsfiddle.net/qrd3muyh/.
How to make the switch button to work? If I run it in my localhost, I got these error when clicking the button pencil : Uncaught TypeError: undefined is not a function
And when clicking the circle button : Uncaught ReferenceError: myCircle is not defined.
Why does it happen and any clue to solve it? Many thanks before..

Answer 1

The reason for this is because all PaperScript tags become a scoped object (referred to as a PaperScope). The reason you are getting the undefined error is because the jQuery callback function has no reference to myCircle, etc.
To resolve this, you should access the currently active paper scopes via the paper object.
$('#pencil').on('click', function(){
console.log(paper.tools); # See how many tools are in your paper object
paper.tools[1].activate(); # Activate one of them.
});
$('#circle').on('click', function(){
paper.tools[0].activate(); # Activate the other.
});
To get the currently active tool, you can do this:
$('#pencil').on('click', function(){
var current = paper.tool; # Access currently active tool.
current.remove(); # remove this tool
});
Here is some good reading about the PaperScopes.