fill it up

HTML

<body>
    <canvas id="canvas" width="300" height="300">Your browser doesn't support canvas.</canvas>
    <p>Click inside the box to create a circle. Fill in as much as you can.</p>
    <p id="percentage">You've filled in nothing.</p>
</body>

CSS

body {
    background:beige;
}
p {
    color:blue;
    font-size:16px;
    text-align:center;
}
canvas {
    display:block;
    border:solid black 2px;
    margin:0 auto;
}

JavaScript

//set up canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var circles = [];

//create circle
function create(location) {
    circles.push({
        x: location.x,
        y: location.y,
        radius: 10,
        color: '#' + Math.floor(Math.random() * 16777215).toString(16)
    });
}

//figure out mouse position
var rect = document.getElementById("canvas").getBoundingClientRect();
// Get canvas offset on page
var offset = {
    x: rect.left,
    y: rect.top
};

function isOnCanvas(a) {
    if ((a.x >= 0 && a.x <= rect.width) && (a.y >= 0 && a.y <= rect.height)) {
        return true;
    }
    return false;
}

function isOnCircle(a) {
    for (var i = 0; i < circles.length; i++) {
        if (Math.pow((a.x - i.x), 2) + Math.pow((a.y - i.y), 2) <= Math.pow((a.radius + i.radius), 2)) {
            return true;
        }
    }
    return false;
}

window.onmousedown = function (e) {
    // IE fixer
    e = e || window.event;
    // get event location on page offset by canvas location
    var location = {
        x: e.pageX - offset.x,
        y: e.pageY - offset.y
    };
    if (isOnCanvas(location) && !isOnCircle(location)) {
        console.log(location, isOnCanvas(location), isOnCircle(location));
        create(location);
    }
};

// draw all circles
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < circles.length; i++) {
        var p = circles[i];
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI);
        ctx.fillStyle = p.color;
        ctx.fill();
    }
}

//find percentage of canvas filled in
var totalSpace = canvas.width * canvas.height;
var totalFilled = function () {
    total = 0;
    for (var i = 0; i < circles.length; i++) {
        var p = circles[i];
        total += Math.PI * Math.pow(p.radius, 2);
    }
    return total;
    console.log(total);
}

    function findPercentage() {
        return (totalFilled() / totalSpace) * 100;
  ...