Jump to content

Bad Graphics Quality on Mobile?


Recommended Posts

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()



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 })
    text.position.set(x, y)
    text.anchor.x = anchorX
    text.anchor.y = y + fontSize / 2 > this.height ? 1 : 0.5
    this.$options.filters.time(time, true),
    pos.x + 2.5 * this.noteWidth,




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...