Updating Canvas Image dynamically using PaperJs

Question

I have an image element with src pointing to an Handler (asp.net), and this image being used as source for Raster (PaperJs) object defined as global object and updated during window.load.

var raster;
paper.install(window);    
function WindowOnLoad() {    
    raster = new paper.Raster('MainContent_imageData');
    raster.position = paper.view.center;
    window.paper.view.draw();
}

The above code is loading image onto the canvas on first load then the image element is getting updated through a button click which is associated with callback control (ComponentArt callback control) but the canvas is not, it displays blank.

Then I created an handler that is being called after the callback is complete but it also didn't work.

function CallBackCompleted(sender,eventArgs) {
    var imgData = document.getElementById('MainContent_imageData');
    raster.image = imgData ;
    raster.position = window.paper.view.center;
    window.paper.view.draw();
}

Answer 1

The following code fixed the issue. The raster object is added as a child object on layer[0] removed all the other objects except children[0], which refers to the raster object.

function CallBackCompleted(sender,eventArgs) {
    if(window.paper.project.layers[0].hasChildren())
         window.paper.project.layers[0].removeChildren(1);

    var imageObj = new Image();
    imageObj.src = document.getElementById('MainContent_imageData').src;
    imageObj.onload = function () {
    window.paper.project.layers[0].children[0].setImage(imageObj);
    window.paper.project.layers[0].children[0].position = window.paper.view.center;
    window.paper.view.draw();
  }
}