Forums » Help » Should ig.Image.drawCount be increased when doing direct canvas draws?

Technically speaking, ig.Image has nothing to do with drawing shapes to canvas. However, if you want to maintain an accurate total draw count it would make sense to increase the value.

For example, the Box2D plugin debug module draws the shapes of bodies. These draws can be plentiful and decrease performance significantly. But currently the module does not change ig.Image.drawCount. This is noticeable if you use the Impact Debug module (impact.debug.debug).

What&039;s best practice here: maintain an accurate total draw count, or keep image-unrelated-stuff out of #ig.Image?

If you want to have the right count whatever the plugin, you might 'inject' the CanvasRenderingContext2d 's prototype to do the count !

   var oldDrawImage = CanvasRenderingContext2d.prototype.drawImage ; 
   CanvasRenderingContext2d.prototype.drawImage=function() {
        CanvasRenderingContext2d.prototype.drawImage.drawCount++;
        oldDrawImage.apply(this, arguments);
   }
   CanvasRenderingContext2d.prototype.drawImage.drawCount = 0;

then you can override the impact count :

##

Objet.defineProperty ( ig.Image, 'drawCount', { get : function() {
return CanvasRenderingContext2d.prototype.drawImage.drawCount;
} , set : function() {} } );

##

Wow, I did not know about Object.defineProperty until now. That is so awesome that you can represent a property with a getter and setter function!! It opens up a lot of possibilities. Thank you for sharing that!

As for maintaining a separate draw count, that is an elegant solution. I was kind of hoping though that someone would say to use the ig.Image.drawCount because it really does look nice when using the debug module.

Yes Object.defineProperty is quite a nice function. It also allows to set 'hidden' properties, i.e. properties that are not enumerable, hence won't pollute the enumeration.
In fact the functions that are added, in impact, to the Array function should be added with Object.defineProperty( obj, propname, { value : someValue })
(obviously it's better to 'recycle' the property definition object)
So it doesn't pollute anything. Same goes for some other additions.

As for the draw count, the method i suggest is the only 100% gurantied if you include several 'foreign' libraries. I should have added the test : the counter should be installed only if we are in debug mode.