Buongiorno a tutti,
ho uno script con la funziona di gratta e vinci ma non mi funzina la condizione se viene grattato l'80% fai uscire un alert o meglio ancora un animazione... vi allego il codice:

codice:

    <script type="text/javascript">
        window.onload = function () {


            // CANVAS con la scritta del premio
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext("2d");


            var txt = document.getElementById("hidTesto").value;
            if (txt.length > 30) {
                ctx.font = '24pt Arial';
            }
            else {
                ctx.font = '30pt Arial';
            }
            ctx.fillStyle = 'Black';
            ctx.textAlign = "center";
            ctx.fillText(txt, 300, 150);
            canvas.style.left = "190px";
            canvas.style.top = "270px";
            canvas.style.position = "absolute";


            // CANVAS con la parte argentata
            var canvas2 = document.getElementById('canvas2');
            var ctx2 = canvas2.getContext("2d");
            var img = new Image();


            img.src = "../images/iPad/gratta_qui.png";
            img.onload = function () {
                var pattern = ctx2.createPattern(img, "");
                ctx2.fillStyle = pattern;


                //            ctx2.fillStyle = 'Gray';
                ctx2.fillRect(0, 0, 600, 350);
                canvas2.style.left = "190px";
                canvas2.style.top = "270px";
                canvas2.style.position = "absolute";
            }
            imageData = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);    // Prendo tutti i pixel del canvas2 (argentato)


            // Funzioni di manipolazione per aumentare il tratto (solo per movimento del mouse) -------------------
            function distanceBetween(point1, point2) {
                return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
            }
            function angleBetween(point1, point2) {
                return Math.atan2(point2.x - point1.x, point2.y - point1.y);
            }
            // -----------------------------------------------------------------------------------------------------


            // Determina la percentuale di pixel resi trasparenti --------------------------------------------------
            function alphaRatio(ctx) {
                var alphaPixels = 0;


                var data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
                for (var i = 3; i < data.length; i += 4) {
                    if (data[i] > 0) alphaPixels++;
                }


                return alphaPixels / (ctx.canvas.width * ctx.canvas.height);
            }
            // ------------------------------------------------------------------------------------------------------


            ctx2.lineJoin = ctx.lineCap = 'round';


            var isDrawing, lastPoint;


            /// ------------------------------------ Inizio del touch, rendo invisibile il tocco e inizio ad accettare il move
            canvas2.ontouchstart = function (e) {
                isDrawing = true;
                var touches = e.changedTouches[0];
                lastPoint = { x: touches.clientX - 190, y: touches.clientY - 270 };
                ctx2.clearRect(lastPoint.x, lastPoint.y, 30, 30);
                e.preventDefault();
            };


            /// ------------------------------------ Fine del touch
            canvas2.ontouchend = function (e) {
                isDrawing = false;
                e.preventDefault();
            };


            /// ------------------------------------ Movimento sul canvas: rendo invisibili i pixel toccati e un loro intorno
            canvas2.ontouchmove = function (e) {
                if (!isDrawing) return;
                var touches = e.changedTouches[0];
                var currentPoint = { x: touches.clientX - 190, y: touches.clientY - 270 };
                ctx2.clearRect(currentPoint.x, currentPoint.y, 30, 30);
                lastPoint = currentPoint;


                // Se ho già "grattato" l'80% dei pixel fornisco un messaggio di vittoria 
                var Perc = alphaRatio(ctx2);
                if (Perc > 10) {
                    isDrawing = false;
                    alert(document.getElementById("hidTesto").value);
                }


                e.preventDefault();
            };


            
        };
    </script>