Plugins used : None. Explanation : As the title states, I've found an issue regarding memory with the canvas.getContext('2d') object, it seems that when you call context before assigning it to a texture( and uploading it to the gpu ), the memory usage( ram, not gpu ), is increased, on top of this the ram don't seem to clear when the texture is destroyed, as it should. This is very easy to replicate, however it may not be as simple to fix, since all bitmaps make an immediate call to...
Plugins used : None.
Explanation :
As the title states, I've found an issue regarding memory with the canvas.getContext('2d') object, it seems that when you call context before assigning it to a texture( and uploading it to the gpu ), the memory usage( ram, not gpu ), is increased, on top of this the ram don't seem to clear when the texture is destroyed, as it should. This is very easy to replicate, however it may not be as simple to fix, since all bitmaps make an immediate call to store the canvas context, which means that this issue happens for every bitmap created.
Error report : No error report, just watch your computers ram usage.
How to replicate : Run the below code in your console from both examples, one after the other while you have task manager open and on the performance tab, make sure memory is selected.
Example 1
Code:
//------------------------------------------------------------------------------
// no reference to context :
//------------------------------------------------------------------------------
// run this code to create a new sprite with a base texture from a canvas.
canvas = document.createElement( 'canvas' );
canvas.width = 10000, canvas.height = 10000;
sprite = new Sprite();
sprite.texture.baseTexture = new PIXI.BaseTexture( canvas );
Graphics._renderer.bindTexture( sprite.texture );
// after you run the above code, run this to destroy the texture,
// you'll see the ram free up immediately.
sprite.texture.destroy( true );
Example 2
Code:
//------------------------------------------------------------------------------
// context referenced :
//------------------------------------------------------------------------------
// run this code and you'll see something nearly identical,
// except the amount of ram consumed is much larger.
canvas = document.createElement( 'canvas' );
canvas.width = 10000, canvas.height = 10000;
canvas.getContext( '2d' );
sprite = new Sprite();
sprite.texture.baseTexture = new PIXI.BaseTexture( canvas );
Graphics._renderer.bindTexture( sprite.texture );
// after you run the above code, run this to destroy the texture,
// you'll see the ram does not get freed.
sprite.texture.destroy( true );
Sample Project:
Dropbox
In the demo, I've simply made two boxes( not the most elegant, I know ).
Clicking box A will create a large texture and upload it to gpu( no getContext2D call ), clicking the box again, will free the memory and delete the texture.
Clicking box B will create a large texture( this time with a call to getContext2D ), clicking the button again will free the memory and delete the texture( or at least it should, but it does not ).
