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

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…

[DennisSmolek]

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.

[lock[bot]]

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.