How to draw a Circle inside a Raster generated Canvas using PaperJs

Question

I am using paperjs to create Raster and to do some drawings on top of a image. But i am unable to figure out on how to draw circles on top of my images after converting my image src to raster. My Application has multiple images in a single page and i will have to do drawings on all images. The below is the code that i am using to convert image src to Raster for drawing on top of images.

      for(i=0;i< imgLength;i++){
         dir = FILE_DIR+"/"+imgJPGList[i];

        imgid = imgJPGList[i].substr(0, imgJPGList[i].indexOf('.'));               

        midproj = new paper.Project(paper.view);
        var raster = new paper.Raster();

        raster.onLoad = function() {

        console.log('Successfully loaded image!');
        }
        raster.source = dir;

        document.getElementById('imgID').appendChild(raster.canvas);//imgID is my DIV
        $("#imgID").append($("<br/>"));

        circle = new paper.Path.Circle(new paper.Point(80, 50), 35);
        circle.strokeColor = 'red';

        //paper.setup(raster.canvas);
        //paper.view.draw();
        }

I am trying to achieve something like the one in the below link.

http://sketch.paperjs.org/#S/TZBBb8IwDIX/SpVLQYLkMO1StBNXDtM4wg5ZsNK0aRzZhmqa9t/XtIhxsGQ/P3968o9KdgDVqGMP4lq1UQ4vZb5ZqsiyAFVvVYKx+piH1Xp3pnNaNprxSg4mQ92K5MaYbDNQxxrJG7kKUrCRTRisBzYjUh+S345B2u1CYDNgsrrLvn7mZuQgAdNEvgUYtYM0ybOjVLTfj1iH0t9TlXKBXIT78t1Kq/ezssqEHTjRT8BN9fK6XC5XmoWwhz1GLPia4FL/gzExTp6I/sGag7COkLy06930vS8C22cMSVg1p8/fPw==

Answer 1

I'm not sure exactly what problems you're having (it would be good to include a symptom or two) but I can offer a few suggestions. BTW, I didn't know there was an onLoad event for rasters - thanks.

1. I've never used raster.canvas. The documentation states that referencing it causes paper to create a canvas. So it is creating a second canvas different from the one that the paper.Project creates or uses.

2. I'm not sure what passing paper.view to paper.Project does. paper.view is the currently active project's view - I can't tell what that is from the code excerpt.

If I were coding this it would look something like (meta code, so pardon errors):

var canvas = document.createElement("canvas");
// do whatever attribute setting needs to be done for canvas.

document.getElementById("#mydiv").appendChild(canvas);

paper.setup(canvas);

// now create a raster in the default, current layer of the paper project
var raster = new paper.Raster();
raster.source = "some URL";

// now create a new layer. it becomes the active layer for drawing
var layer = new paper.Layer();

// draw circles and other stuff. they go on the new layer.

The order of some of the things can be changed. Inserting the canvas could be triggered on the loading of the image, etc.

But given the information I have that's my stab at an answer.