Important: Please read the Qt Code of Conduct -

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.

    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.translate(T.getViewWidth()/2, T.getViewHeight()/2);
    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);

    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?