Question

i’m developt a new proyect=, it is in html5 using canvas for draw elements.

I have 6 different canvas in the html and i have to know when the user draws over the canvas and draws at least a 50% of each canvas, and trigger an event when the user draws on all the canvas!

This is my code: http://jsfiddle.net/xtJZ3/

Thanks in advance.

Answer 1

It would be hard and inefficient to calculate exactly when 50% of the image has been “scratched”. What you can do instead, is cheat a little, by dividing the image into “zone”. In this example, I divided your image into 16 vertical strips. Whenever the user clicks into a zone, we just mark it as “scratched”. We then check whether more than 8 zones have been scratched, and if so, do something.

var zoneNumber = 16;
var zoneSize = 250 / zoneNumber;
var zones = [];
for(var i = 0; i < zoneNumber; i++)
    zones.push(false);
var done = false;

In the constructor I initialize some variables like the number of zones, their sizes (I hard coded the size of your images), an array of false for whether they have been “scratched” and a variable indicating whether we have reported the image to have been scratched.

var zone = Math.floor(x / zoneSize);
zones[zone] = true;
for(var i = 0, z = 0; i < zones.length; i++) {
    if (zones[i])
        z++;
    if (z >= zoneNumber / 2 && !done) {
        done = true;
        var p = document.createElement("p");
        p.innerHTML = "scratched";
        document.getElementById("main").appendChild(p);
    }
 }

Then, in your scratch function, I use basic math to find out which zone the user is clicking. I set it to true, then count how many are true. If more than half, I show the message.

Live example

You could instead want to only show the message when you have 75% of the thing scratched, which would be better in my opinion. You could also make it more accurate by making the zones a 2D grid instead of just stripes.

If you have any questions, don’t hesitate to ask.