is it possible to have draggable drawn elements that respect boundaries

I created some elements inside a square, and I can get a click event on the canvas but I am not sure how to get an object specific click or mouse down event. I am trying to make these circles draggable, but respect the boundary of the square. is it possible? here is my code with the alert that happens on canvas click.

var winRes = "dialog {  \

    text: 'test',  \

    margins: 15, \

    alignChildren: 'row', \

    \

    canvas: Custom {  \

        preferredSize: [200, 200], \

        creation_properties: {borderStyle: 'black'} , \

    }, \

}"

// Window

var win = new Window(winRes);

function color() { return [Math.random(),Math.random(),Math.random(),1] }

// define the graphic property

canvasGraphics = win.canvas.graphics

// do the drawing

win.canvas.onDraw = redraw

win.canvas.addEventListener ('mousedown', down, false);

function down(event){

    alert("clicked canvas")

    }

function redraw() {

          // creates a red filled square

          canvasGraphics.newPath()

          canvasGraphics.rectPath(10, 10, 200, 200)

          canvasGraphics.fillPath(canvasGraphics.newBrush(canvasGraphics.BrushT ype.SOLID_COLOR, color(), 1)) // HERE

          canvasGraphics.newPath()

          var dot1 = canvasGraphics.ellipsePath (20, 20, 30, 30)         

          canvasGraphics.fillPath(canvasGraphics.newBrush(canvasGraphics.BrushT ype.SOLID_COLOR, color(), 1)) // HERE

          canvasGraphics.newPath()

          var dot2 = canvasGraphics.ellipsePath (20, 90, 30, 30)

          canvasGraphics.fillPath(canvasGraphics.newBrush(canvasGraphics.BrushT ype.SOLID_COLOR, color(), 1)) // HERE

}

win.show()