HTML Canvas获得总填充百分比

Question

我做一个画布，当光标移动时恢复原始图像，以不同的百分比显示在不同的消息中告诉用户。如何计算已填充的总百分比？

var canvas = document.getElementById("canvas");
var context =  canvas.getContext('2d');

context.beginPath();
context.fillStyle = 'black';
context.fillRect(0, 0, 400, 300);

canvas.onmousedown = function() {
    canvas.onmousemove = function() {

        var x = event.clientX;
        var y = event.clientY;
	
        context.globalCompositeOperation = "destination-out";
        context.beginPath();
        context.arc(x-0, y, 30, 0, Math.PI*2);

        context.fill();
    }
}

canvas.onmouseup = function() {
    canvas.onmousemove = function() {
        //
    }
}

<img src="http://blog.honeyfeed.fm/wp-content/uploads/2015/01/onepiece-wallpaper-20160724205402-560x380.jpg" style="width: 400px; height: 300px; position: absolute; z-index: -1;" />
<canvas id="canvas" width="400" height="300"></canvas>