How to use paper js on dynamically created canvas ?

[karthik kadapa]

I have multiple canvas images on my page I am trying to get canvas id using paperjs after mousedown event on a single image through jquery. My image disappears after a mouse click and after running the below code. I read from https://github.com/paperjs/paper.js/issues/479%22 that paperjs will remove canvas image.

<script type="text/javascript">

 window.onload = function () {

    $('#imgID').on('mousedown', function (e) { //imgID is my div

        if($.isNumeric(e.target.id)){

        console.log(e.target.id);

        var canvas = document.getElementById(e.target.id);
        paper.setup(canvas);
        var path = new paper.Path.Circle({
        center: event.downPoint,
        radius: (event.downPoint - event.point).length,

        strokeColor: 'red'
        });

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

        }else {
        return;
        }

        var offset = $(this).offset();
        console.log(e.clientX - offset.left);
        console.log(e.clientY - offset.top);
    });
}
</script>

I should be able to draw circles like the one in the below link on multiple images on my website...
http://www.jqueryscript.net/demo/jQuery-Plugin-To-Draw-Shapes-with-Html5-Canvas-Element-drawingshapes/
I cannot use "script type="text/paperscript" canvas='canvas'" as my canvas are created dynamically through javascript. Any help is appreciated. Thanks in advance.

[Jürg Lehni]

It doesn’t make sense to re-initialize the paper canvas on each click through paper.setup(canvas). You only need to do this once, right at the beginning. If you want to do it only on the first click on the item, then you need to keep track of wether you’ve initialized the canvas or not, e.g. by keeping track of the element’s state through jquery’s data() method.

Also, please note that when using multiple canvases, you will probably want to create a separate scope for each of them.

J

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.