Bad Graphics Quality on Mobile?

[Burrito]

Hello, I'm drawing a simple scene using Pixi.js

The issue right now is that it looks all amazing on desktop, however it looks horrendously bad on mobile (I'm using iOS Safari 9)

In particular, the grids have missing vertical lines, texts are badly teared, and the whole thing looks blurry in general.

Any idea why that is happening?

this.app = new this.PIXI.Application({
    view: this.$refs.canvas,
    antialias: true,
    backgroundColor: 0x000000,
    preserveDrawingBuffer: true,
    autoDensity: true,
    resolution: window.devicePixelRatio
})

//...

this.graphicsLane = new this.PIXI.Graphics()
this.layerLane = new this.PIXI.Container()

this.layerLane.addChild(this.graphicsLane)
this.app.stage.addChild(this.layerLane)

//...

this.graphicsLane.lineStyle(
    lineWidth,
    lineMidColor,
    lineMidAlpha[0]
)
for (j = 0; j < 6; j++) {
    x = i * this.panelWidth + (j + 4) * this.noteWidth
    y = this.height
    this.graphicsLane.moveTo(x, 0)
    this.graphicsLane.lineTo(x, y)
}

//...

var addText = (string, fill, fontSize, anchorX, x, y) => {
    var text = new this.PIXI.Text(string, { fill, fontSize })
    this.layerLine.addChild(text)
    text.position.set(x, y)
    text.anchor.x = anchorX
    text.anchor.y = y + fontSize / 2 > this.height ? 1 : 0.5
    this.spriteTexts.push(text)
}
addText(
    this.$options.filters.time(time, true),
    '0x808080',
    fontSize,
    1,
    pos.x + 2.5 * this.noteWidth,
    pos.y
)

 

[ivan.popelyshev]

That's a case where i have All of the ideas!

To narrow it down, please provide a demo.

[Burrito]

A demo as in source or?

https://bestdoribeta.animepie.to/tool/chart/92/expert/B-O-F

It looks alright on 100% zoom, as you go up the tearing gets worse and worse.

[Exca]

Your total canvas size goes over what is maximum on the device -> it renders it on lower resolution and then upscales -> blurry image.

You should implement it so that the canvas size is the maximum the viewport can show. That way rendering happens only to the actually visible region and memory requirements for the canvas dont go over device limits.

Looks like you're not moving the canvas when scrolling so fix should be just not making your canvas so large.

[Burrito]

Ahh, I tried limiting my canvas width and it looks clean now, so that's the issue then.

What would the best solution be to implement such a scrollable view of this long image?

I initially decided to do it this way (rather than a fixed canvas and implement scrolling myself) because a native scrollbar is much better for desktop user, and it also allows directly exporting the full image into data URL.

[Exca]

You could still use the native scrolling. Just have some element that is on top of the canvas with the actual width that the canvas would have now, then just read it's position and offset the container in pixi that you are rendering by same amount.

Other option is to track mouse/touch -movements on canvas and move the container that way.

Could be many other ways also.

[Burrito]

Oh yeah that's a good idea, just use some CSS magic, why haven't I thought of that.

What about exporting to data URL? Some people would love to have the whole image opened in another window so they can do whatever zooming in or panning they want with it (especially useful for mobile users), but with fragmented view I can only export a part of the chart now. I can just remove that feature and do fullscreen instead but I feel it's too good to let go.

[ivan.popelyshev]

That lag will be noticable if you use both canvas and some dom elements - canvas will be lagging behind a bit. Maybe with 120% height canvas, and you reposition it before next render it'll be less laggy.

[Burrito]

Thanks for all the help, it's working pretty well now!

Still some details could be fleshed out, but the major graphics issue is gone and that's the most important thing.