javascript - Canvas get percent of filled area -

i've got canvas user can draw, need detect percent of filled area. user has continue draw during checking.

i have canvas , user can draw on it. got here little function check if pixels aren't blank, it's slow , user can't draw anymore.

have idea of how can this?

update :

for drawing on canvas i'm using lineto() :

$.fn.drawmouse = function() { var clicked = 0; var start = function(e) { clicked = 1; ctx.beginpath(); x = e.pagex; y = e.pagey; ctx.moveto(x,y); }; var move = function(e) { if(clicked){ x = e.pagex; y = e.pagey; ctx.lineto(x,y); ctx.stroke(); } }; var stop = function(e) { clicked = 0; }; $(this).on("mousedown", start); $(this).on("mousemove", move); $(window).on("mouseup", stop); };

wouldn't better, if added "x percent covered" value percentfilled variable each time user draws something?
example:
suppose draw creating circles. can calculate area of circle, perhaps check, if of pixels aren't filled. add (areaofcircle (in %, or maybe px^2) - areaalreadyfilled (in %, or maybe px^2) ) percentfilled variable , current filled percentage. everytime paint something, adds painted area. can avoid calculating covered part of canvas whole entirely.