Clear html5 canvas, then re-initialize it - html

Question

I'm working on an activity where a user would draw a line chart and check to see how close it is to an actual chart. I've got it working, but need help on 'resetting' the canvas. I can get it to clear, but I need to reinitialize it after it's cleared so the user can try again.
here is the reset code I have so far:
var clearCanvas = false;
function onFrame(event) {
if (clearCanvas && project.activeLayer.hasChildren()) {
project.activeLayer.removeChildren();
clearCanvas = false;
}
}
$('.clear').on('click', function() {
clearCanvas = true;
return false
})
Here is a jsfiddle
I've kinda hacked this code together, as I'm not a coder, so go easy if it's not the best way of doing things. If anyone has a cleaner/more efficient way of doing this I'm all ears!
Thanks in advance.
S

Answer 1

First, your jsfiddle is getting a 404 when it tries to use "http://paperjs.org/static/js/paper.js". Switching that to "https://raw.github.com/paperjs/paper.js/master/dist/paper.js" works for me.
Second, if you want the user to try again, they need to be able to place 7 (or however many) new points after the reset, so in your onFrame function you need to set maxPoints to 0 when clearing the canvas.
Third, the path that connects the users points will need to be re-initialized. That can be done by calling path.removeSegments() and then re-adding path to the activeLayer.
Fourth, once you have removed the children from the activeLayer, fullChart (the "answer") is no longer on the activeLayer. You will have to re-add it and re-set its opacity to 0 (if you want it hidden again).
Putting those together, this onFrame seems to do what you are attempting:
function onFrame(event) {
if (clearCanvas && project.activeLayer.hasChildren()) {
project.activeLayer.removeChildren();
fullChart.opacity = 0;
maxPoints = 0;
path.removeSegments();
project.activeLayer.addChildren([fullChart, path]);
clearCanvas = false;
}
}
Here's a jsfiddle.
Other notes:
I don't believe you have to separate your code like that; you could just clear the canvas in your button's callback instead of waiting for the onFrame. So all of the code in onFrame could go in the callback instead (just without the clearCanvas variable).
I would also recommend using the same Point objects for your myCircle and myPath instead of making new ones with the same coordinates. For example:
var point1 = new Point(72, 214);
var point2 = new Point(205, 177);
...
var point7 = new Point(868, 177);
var myCircle1 = new Path.Circle(point1, 10)
var myCircle2 = new Path.Circle(point2, 10)
....
var myCircle7 = new Path.Circle(point7, 10)
var myPath = new Path([point1, point2, ..., point7]);