question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pixi JS Renderer Drawingbuffer issues on iOS

See original GitHub issue

Hi there! Pixie code which runs well on desktop seems to behave strangely on mobile. I am a noob to pixie.js so I may with a very high likeliness be doing something wrong here.

When I use my drawing code on mobile, it appears that the canvas refreshes strangely. I am not redrawing the entire stroke but maintaining the DrawingBuffer and just adding new sprites to it.

No matter if I set ‘legacy:’ to false or true (as below) - it will give me the same result.

Thanks for taking a look!

pixierenderer


initializePixieCanvas() {
    console.log("init canvas")
    const cArea = this.canvasContainer;
    const width  = 1000;
    const height = 1000;
    this.stage = new PIXI.Container();
    this.renderer = new PIXI.WebGLRenderer(
      width,
      height,
      {
          antialias: false,
          transparent: true,
          resolution: 2,
          clearBeforeRender: false,
          preserveDrawingBuffer: true,
          premultipliedAlpha: false,
          forceFXAA: true,
          legacy: true
      }
    );

    cArea.appendChild(this.renderer.view);

    this.renderer.view.style.position = "absolute";
    this.renderer.view.style.top = "0";
    this.renderer.view.style.left = "0";
    this.renderer.view.style.pointerEvents = "none";
    this.renderer.view.style.zIndex = "99";

    const cnvs = this.renderer.view;
    const scaleForHighResDisplay = true;
    if (scaleForHighResDisplay) {
        cnvs.width = width * 2;
        cnvs.height = height * 2;
        cnvs.style.width = width + 'px';
        cnvs.style.height = height + 'px';
    }

    this.pointer = new PIXI.Sprite(PIXI.Texture.fromCanvas(this.brushElement));
    this.pointer.texture.destroy();
    this.pointer.texture = PIXI.Texture.fromCanvas(this.brushElement);
    this.pointer.anchor.x = 0.5;
    this.pointer.anchor.y = 0.5;

    this.renderer.clear();

    this.stage.addChild(this.pointer);
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
ghostcommented, Jun 16, 2017

You should be writing native apps for stuff this advanced.

3reactions
bhauxcommented, Jun 17, 2017

So the good news is, turning on antialiasing fixes this artifact. But clearly turning on antialiasing still has a significant hit on the performance. Any help on bypassing/fixing this is bug is hugely appreciated. thx!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Pixi JS Renderer Drawingbuffer issues on iOS #4106 - GitHub
When I use my drawing code on mobile, it appears that the canvas refreshes strangely. I am not redrawing the entire stroke but...
Read more >
Text - PixiJS
When drawing text with a bitmap font, PixiJS doesn't need to render the font glyphs into a temporary buffer - it can simply...
Read more >
Trouble rendering a sprite with pixi.js on iOS 8 - Stack Overflow
UPDATE: I've narrowed the issue down to the background color. For some reason, if the container background color is not black, and the...
Read more >
PIXI.Renderer - PixiJS API Documentation
The Renderer draws the scene and all its content onto a WebGL enabled canvas. This renderer should be used for browsers that support...
Read more >
WebGL Resizing the Canvas.
Here's what you need to know to change the size of the canvas. Every canvas has 2 sizes. The size of its drawingbuffer....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found