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 3000×2500 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
});