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.
ScreenshotThe 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?
3/3