Draw multiple circles using paperJS

Question

How can I draw multiple circles using paperjs? I tried removing path.removeOnDrag() it works and after removing fillcolor, but the output is not as expected.

<script type="text/paperscript" canvas="canvas">
        function onMouseDrag(event) {
            // The radius is the distance between the position
            // where the user clicked and the current position
            // of the mouse.
            var path = new Path.Circle({
                center: event.downPoint,
                radius: (event.downPoint - event.point).length,
                fillColor: null,
                strokeColor: 'black',
                strokeWidth: 10
            });

            // Remove this path on the next drag event:
            path.removeOnDrag();
        };
</script>

it helps if you describe what you expect. The code does exactly what it's supposed to do, so what is the problem you perceive? Also, a jsfiddle.net example can be helpful; in this case, http://jsfiddle.net/vupt3 — Mike 'Pomax' Kamermans, Jun 01 '13 at 00:03
As [http://jsfiddle.net/vupt3/](http://jsfiddle.net/vupt3/) shows am getting output. How to draw another circle without hiding first one. — chiyango, Jun 01 '13 at 00:08

score 0 · Accepted Answer · answered Jun 01 '13 at 05:54

Here an easy solution: http://jsfiddle.net/vupt3/1/

So on mouseUp you just store the currently drawn path into the array. Then also if you need to, you can access and manipulate those rings later on.

// path we are currently drawing
var path = null;

// array to store paths (so paper.js would still draw them)
var circles = [];
function onMouseDrag(event) {
    // The radius is the distance between the position
    // where the user clicked and the current position
    // of the mouse.
    path = new Path.Circle({
        center: event.downPoint,
        radius: (event.downPoint - event.point).length,
        fillColor: null,
        strokeColor: 'black',
        strokeWidth: 10
    });

    // Remove this path on the next drag event:
    path.removeOnDrag();

};

function onMouseUp(event) {
    // if mouseUp event fires, save current path into the array
    circles.push(path);
};

Thank You working great. Is there any alternate solution for IE8. — chiyango, Jun 01 '13 at 06:06
No. PaperJS does not support IE 8. Read more here: http://stackoverflow.com/questions/10751677/paper-js-with-excanvas — Henrik Peinar, Jun 01 '13 at 06:39

Draw multiple circles using paperJS

1 Answers1