Paper.js: Why by scaling an image becomes blurred?

Question

Paper.js: Why by scaling an image becomes blurred? Code

            paper.setup(canvasDOMElement);
            var raster = new paper.Raster(image2);
            // raster.size = new paper.Size(800, 600);
            raster.scale(0.05, {x:110, y:110});
            // raster.position = paper.view.center;
            paper.view.draw();

The image is 3000x2500 px and is blurred at borders and the image itself. If I don't use the scale the image is clear.

Well I've made an animation like this:

        onAppear = function(){
            paper.setup(canvasDOMElement);
            var raster = new paper.Raster(image2);
            // raster.size = new paper.Size(800, 600);
            // raster.scale(1, {x:110, y:110});
            // raster.position = paper.view.center;
            var scale = 1;
            paper.view.onFrame = function(event) {
                // On each frame, rotate the path by 3 degrees:
                scale -= 0.0001;
                raster.scale(scale, {x:110, y:110});
            }
            paper.view.draw();
        }

This is kind of weird as the scale is applied one over the other and therefore has an exponential curve, which is not what I thought. So a better way is:

        onAppear = function(){
            paper.setup(canvasDOMElement);
            var raster = new paper.Raster(image2);
            // raster.size = new paper.Size(800, 600);
            // raster.scale(1, {x:110, y:110});
            // raster.position = paper.view.center;
            var scale = 1;
            paper.view.onFrame = function(event) {
                // On each frame, rotate the path by 3 degrees:
                raster.scale(0.99, {x:110, y:110});
            }
            paper.view.draw();
        }

In this way the image is re-scaling on each frame to 0.99. Even so, after 200 iterations the image is becoming very very blurred.

Answer 1

The real real problem is explained here: http://demo.qooxdoo.org/2.1/apiviewer/index.html#qx.ui.embed.Canvas

syncDimension = true!

var canvas = new qx.ui.embed.Canvas().set({
  syncDimension: true
});

Answer 2

Well the main source of the problem is that I've not been aware about the difference between the canvas.style.height and canvas.height:

Both of them changes the height of the canvas but

the canvas.style.height changes the scale, therefore I've blurred images

and the canvas.height keeps the same scale so no blurred images.

For qooxdoo users:

var canvas = new qx.ui.embed.Canvas().set({});
// changing the height on canvas like this:
canvas.setHeight(900)
// will set the canvas.style.height
// which will become blurred

// therefore you must do:
var canvasDOMElement = canvas.getContentElement().getDomElement();
canvasDOMElement.height = 900;
// this will resize your canvas without scaling it.