I am looking to create a line when the mouse is clicked, and remove the previously drawn line. View the code on jsfiddle.net at this link.
While my current code successfully draws a line when the mouse is clicked, it does not remove the previous line. I need assistance with removing the previous line. Can someone help me? Thank you!
Here is the YUI code snippet:
YUI().use('event', 'node', 'graphics', function (Y) {
var mygraphic = new Y.Graphic({
render: "#play"
});
Y.one('#play').on('click', function (e) {
var bob = mygraphic.addShape({
type: "path",
stroke: {
weight: 4,
color: "#00dd00"
},
fill: {
type: "linear",
stops: [{
color: "#cc0000",
opacity: 1,
offset: 0
}, {
color: "#00cc00",
opacity: 0.3,
offset: 0.8
}]
}
});
if (bob) {
bob.moveTo(100, 100);
bob.lineTo(e.clientX, e.clientY);
bob.end();
bob.closePath();
//mygraphic.removeShape(bob);
}
});
});
And here is the snippet for the HTML and CSS code:
<div id="play"></div>
#play {
width:400px;
height:300px;
border:1px solid black;
}