I'm building a mobile app using Ionic + VUE. It shows a Mapbox map and some polygons drawn over it. All of my polygons are drawn in a mapbox canvas layer.

The polygons are loaded from a geojson file and then projected to pixel coordinates and drawn into a html5 canvas element.

const layer = canvas.getContext('2d');

drawPolygon(layer, polygon, fillColor, strokeColor, strokeWidth) {
    layer.fillStyle = fillColor;
    layer.lineWidth = strokeWidth;
    layer.strokeStyle = strokeColor;
    layer.beginPath();
    for (let i=0; i<polygon.coords[0].length; i++) {
        let coords = polygon.coords[0][i];
        const pt = this.project(coords[1], coords[0]);
        if (i === 0) layer.moveTo(pt.x, pt.y)
        else layer.lineTo(pt.x, pt.y);
    }
    layer.closePath();
    if (fillColor != null) layer.fill();
    if ((strokeColor != null) && (strokeWidth > 0)) layer.stroke();
},

project() is a mapbox function which does the projection to screen coordinates.

I've done this type of polygon drawing in a web application using VUE. It runs smoothly and very fast.

Now I tried to implement it using Ionic. It works as expected, but when a lot of polygons are being drawn, the app lags and the overall performance is low.
I've tried it in the browser, in a android emulator and also on a physical device resulting the same low performance.

I think, that the drawing to canvas does the lagging, because when I turn off the whole mapbox and display only the polygons, no difference can be experienced.
I tried several opacities, also fills without opacity - same result.

As soon as I create the same project without Ionic and run it everywhere (browser, emulator, physical device) it runs smoothly and much faster.

We're talking about 500-1000 polygons with about 50 to 200 points per polygon. But the app is optimized that only those polygons are drawn, which are visible to the viewport. Again, no issue on a plain Vue project not using Ionic. It can handle also much more data to draw.

So the question is, is it a ionic issue or a setting that I don't know about, or a mapbox issue? Maybe is there an Ionic "switch" to boost performance, which is off by default?

Any help appreciated. Thanks.