Canvas Complete Drawing

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:

Thanks in advance.


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++)
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])
    if (z >= zoneNumber / 2 && !done) {
        done = true;
        var p = document.createElement("p");
        p.innerHTML = "scratched";

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.

Need Your Help

Why can't a read-write user see the aspnet_ tables after I've created them with aspnet_regsql? sql-server membership-provider aspnetdb

I created the membership tables etc. with aspnet_regsql -S myServer -E -A mr -d anExistingDatabase. I can see these changes in SQL Server Management Studio, when I connect as myself through Windows

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.