Pixi.js: Graphics.generateCanvasTexture() Bug

[ghost]

There's a bug when converting a graphics object to a texture with generateCanvasTexture.
Here's a Pen that demos the bug: CodePen

The triangle displayed on the right side shows the Graphics object.
The triangle displayed on the left side shows the generated texture.

The corners of the texture's triangle are cut off, making the corners much less sharp and making the triangle a little smaller.

Setting the line width to 0 fixes the issue in that the corners are no longer cut off, but of course then we loose the outline.

P.S. - We're using the latest release of Pixi (4.4.1).

And if anyone has a workaround we'd love to try it :)

[ivanpopelyshev]

I use plain html5 2d api for those things. Then "Texture.fromCanvas(myGeneratedCanvas)"

[andrewstart]

I think that the workaround would be either making a RenderTexture from two layered triangle fills, or using the Canvas2D api directly to generate the canvas. Since the extra space needed for sharp line joins isn't easily predicted, I imagine that a fix for this would just be givinggenerateCanvasTexture a padding parameter for cases like this.

[ghost]

Thanks for the suggestions! We've got it working using the Canvas2D API with PIXI.Texture.fromCanvas and loving the nice crisp graphics.

One issue we're having thou is that we need to create a new canvas element for each texture, because if we clear the canvas after creating the texture and sprite, the sprite ends up being empty..

[ivanpopelyshev]

You can upload it to GPU and then re-use the canvas:

renderer.textureManager.updateTexture(myTexture)

It happens when you first time draw sprite, so if you re-used canvas before update, it will upload newer version. Do that manually and it'll work.

As for PIXI Canvas Renderer - yeah, you need multiple canvases. But in that case you can really use PIXI.Graphics.

[ghost]

Hi @ivanpopelyshev. I'm trying to re-use a canvas to create multiple textures, using the method you showed me, but it's not working after all. I made a very simple little CodePen that tries do draw a green square, update the texture, and then draw a red square, but both squares are always the same color. Can you please take a look when you get a chance? I'm not sure what else to try..

CodePen

[ivanpopelyshev]

Oh my!
"fromCanvas" caches stuff, and it won't update texture that already exists in cache.

That works:

new PIXI.Texture(new PIXI.BaseTexture(offScreenCanvas));

[ghost]

Awesome! Thanks @ivanpopelyshev.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.