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.

Texture.fromCanvas() doesn't update when called more than once and is always linked

See original GitHub issue

Hey guys,

I’m building a pixi based image/content editor and using quill.js as my text editor.

What I do is position the editor directly over a rectangle object when you open it, then you type/make changes and when you off-click it fires to a hidden HTML2Canvas that renders a canvas image of the html.

I Inject that image into pixi in the rectangle and BAM it’s perfect right in place.

I was going to have to generate a hidden dom image with the src being the base64. Then I realized I could just use the canvas as the source for a PIXI.Sprite or PIXI.Texture

This works as expected and generated the image, but I was killing myself trying to figure out why it wasn’t working when I would go a second time.

I use: const texture = PIXI.Texture.fromCanvas(canvasElement); What I figured out is because the texture uses the same canvasElement pixi treats it as the same texture I had used before and simply ignores the request with no errors or messaging. So it goes:

  1. paint the texture from html2canvas
  2. Import the texture with fromCanvas()
  3. Clear the html2canvas canvas,
  4. paint new data to html2Canvas
  5. Attempt to import new texture with fromCanvas() with the new painted data
  6. Pixi detects the canvas is the same as the one from step 2. << NOTHING HAPPENS >>

My thinking is if I’m trying to create a new texture from the same source PIXI should automatically run BaseTexture.update() which would update the texture from the passed canvas.

The other issue is that once linked, updating/changing the canvas at all will always change the BaseTexture for all linked textures that use the same canvas element. I can see that origin argument is used to generate the _pixiId and cache but I can’t see how I can target different textures by adjusting this at all…

My plan at the moment is to use my html2canvas canvas to generate hidden dom images and use them as the source for the BaseTexture and then change them as needed and fire updates() but this seems heavy… Not sure what I’d want Pixi to do, but figured I’d put it out there…

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
DennisSmolekcommented, Sep 21, 2017

Thanks @ivanpopelyshev I’ll take a look and fiddle with that.

I think the disconnect was that I didn’t realize the canvas is treated as the lifetime texture source vs generating an output once.

I thought I could use the same canvas element to generate many different textures but once you bind the canvas element it is directly related to the BaseTexture that was created.

This is fine in principle but if the same canvas element is passed I thought it would be helpful to update the texture to the new canvas data vs simply ignoring the later calls.

The constant binding is also fine, It makes sense but I didn’t realize that’s what is was doing. I’ll close the issue…

@m9dfukc I felt I had 2 options:

  1. Create new Canvas elements every time I needed one ( not efficient )
  2. Made my own function to generate base64 data off the canvas into a generated img component, then import the texture like normal. I had to do some stuff with ID keys but this is the way I went.
0reactions
lock[bot]commented, Feb 24, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Texture.fromCanvas() doesn't update when called more than ...
Hey guys, I'm building a pixi based image/content editor and using quill.js as my text editor. What I do is position the editor...
Read more >
Phaser 3: Update() canvas texture not working - Stack Overflow
Here is a demo-code, that shows how I would approach the whole createCanvas , terrain/land destruction collision mechanic.
Read more >
Optimizing canvas - Web APIs | MDN
The <canvas> element is one of the most widely used tools for rendering 2D graphics on the web. However, when websites and apps...
Read more >
WebGL Rendering to a Texture
Let's take our previous rendering code and make it a function so we can call it twice. Once to render to the texture...
Read more >
Re: Removing canvas texture from a scanned photo - Adobe ...
Then duplicate original layer again and use Filter > Guassion Blur around 29%, then set the layer opacity to 32% -see pic. Then...
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