User:Menno Harder/Canvas

[| Samba class]
Knock one time
Knock two times
Clap one time
Clap two times

function draw() {
    c = document.getElementById("c2");
    p = c.getContext("2d");
    hands = 1;
    x = 20;
    y = 20;
    function functienaam(){
    if (hands < 25) {
        //console.log(hands);
        if (hands % 3 == 0){
          p.fillRect(x,y,20,20);
        }else{
          p.strokeRect(x,y,20,20);
        }
        x = x + 50;
        //hands++;
        if (x > 400) {
            x = 20;
            y = y + 50;
        }
    }
    if (hands >= 24 && hands<48) {
        //console.log(hands);
        if (hands % 2  == 0 || hands % 3 ==0){
          p.strokeRect(x,y,15,15);
        }else{
          p.strokeRect(x,y,20,20);
        }
        x = x + 50;
        //hands++;
        if (x > 400) {
            x = 20;
            y = y + 50;
        }
    }
        if (hands >= 47 && hands<71) {
        //console.log(hands);
        if (hands % 3  == 0 || hands % 2 ==0){
          p.strokeRect(x,y,20,20);
          p.strokeRect(x,y,15,15);
          p.strokeRect(x,y,10,10);
        }else{
          p.fillRect(x,y,20,20);
        }
        x = x + 50;
        //hands++;
        if (x > 400) {
            x = 20;
            y = y + 50;
        }
    }
        if (hands >= 70 && hands<94) {
        //console.log(hands);
        if (hands % 2  == 0 || hands % 4 ==0){
          p.strokeRect(x,y,15,15);
        }else{
          p.fillRect(x,y,20,20);
        }
        x = x + 50;
        //hands++;
        if (x > 400) {
            x = 20;
            y = y + 50;
        }
    }

    hands++;

  }
    setInterval(functienaam, 700);
}