how to use paperjs on dynamically created canvas?

Question

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...

<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=''" as my canvas are created dynamically through javascript. Any help is appreciated. Thanks in advance.

Answer 1

If your saying that the element with the id imgID is added dynamically, you'll need to use event delegation like $(document).on('mousedown', '#imgID', function (e) { // your code here...});

<script type="text/javascript">
 window.onload = function () {

    $(document).on('mousedown', '#imgID', 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>