Kinetic JS - Change image resolution using filter when mouse is down

Question

I am changing left mouse down (drag) to change the image, it works but very slow (refresh). I am using the following to display the image:

 function makeKineticImage() {
                dImage1 = new Kinetic.Image({
                    drawFunc: function(canvas) {
                        var context2 = canvas.getContext("2d");
                        var x = 0;
                        var y = 0;
                        context2.drawImage(dicom1, x, y);
                        imageData = context2.getImageData(x, y, dicom1.width, dicom1.height).data;
                    }
                });
                layer1.add(dImage1);

Then changing the image using Ajax:

    ...
    }).done(function(d) {
dImage1.applyFilter(Kinetic.Filters.Grayscale, null, function() {
image.src = '/Home/changeImage?udm=' + (++udm);
 layer1.draw();
  });

I tried Grayscale filter, the refresh improved but not good enough. Is there a way to lower the resolution (down sampling). I would appreciate your suggestions, thanks in advance.