Canvas rendered very poor quality image



  • Hi,

    I have canvas+javascript application on QML and we render map tiles on the canvas but the image is very poor quality.
    Screenshot

    The image is OK in HTML5 so this isn't a issue with the code/image itself.
    Here is the part that renders the tile:

    this.context.save();
    this.context.translate(T.getViewWidth()/2, T.getViewHeight()/2);
    this.context.rotate(this.wayfinder.options.map2DRotation*Math.PI/180);
    this.context.translate(-T.getViewWidth()/2, -T.getViewHeight()/2);

    this.context.translate(T.getZoomedMapPosition()[0], T.getZoomedMapPosition()[1]);

    this.context.scale(T.getZoom(), T.getZoom());
    this.context.drawImage(tile.image, tile.xwidth, tile.yheight, width, height);
    this.context.restore();

    Any ideas what should I try?



  • I think the issue is with using context.scale. If I remove that the image will be sharp again but it brakes the logic. Any ideas how can I go round that.



  • Answering my own question. By multiplying the drawImage coordinates by the zoom factor helped to solve it. Is this a bug of QML or something that I have read from the documentation?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.