Limit to number of circles?

[b1g4L]

I'm having trouble creating a simple example where I cover a background image with a solid color and the user is able to use the mouse cursor to click and hold to "erase" the foreground color to expose the image behind it. I'm using a mask to cover the image and the Graphics module to draw circles with alpha transparency to expose the image underneath. The issue I'm having is after a certain number of circles are drawn, Pixi just stops drawing anymore. I would appreciate if someone could help me figure out why drawing circles just stops, or even better, if you know of a cleaner / more performant way to achieve a similar result. Here is a JSFiddle of my code. Thank you.

[ivan.popelyshev]

Graphics really stores everything you did, and drawing it from scratch every frame.

Its better to use javascript canvas API for graphics to do that, that way your result will be saved each time, and you wont overflow graphics buffer:

var myForeground = PIXI.Texture.fromImage("front.png");

var _canvas = Document.createElement("canvas");
_canvas.width = myForeground.width;
_canvas.height= myForeground.height;
_canvas.drawImage(myForeground.baseTexture.source, 0, 0);
var _context = foregroundCanvas.getContext("2d");
_context.globalCompositeOperation = 'destination-out';

var foregroundTexture = PIXI.Texture.fromCanvas(canvas);
var foregroundSprite = new PIXI.Sprite(foregroundTexture);

stage.addChild(foregroundSprite);


//now, every time you are drawing a circle:
_context.beginPath();
_context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
_context.fill();

foregroundCanvas.drawCircle(x, y, 10);
foregroundTexture.dirty = true;

 

[b1g4L]

Thank you for suggestion. I was able to get it working by rendering to a side canvas and using that as the texture, as you suggested. Thanks!