jac

<!DOCTYPE html>

<html>
<head>
    <title>hej</title>
    <meta charset="utf-8" />
    <style>
        canvas{
            border: 1px solid black
        }
    </style>
</head>

<body>
<canvas id="cvs" width="800" height="600">
    Browser does not support canvas...
</canvas>
<script type="text/javascript">
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var X, Y, W, H;
    X = 0;
    Y = 0;
    W = cvs.width;
    H = cvs.height;
    ctx.fillRect(X, Y, W, H);
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fillRect(W / 2 - W / 4, H / 2 - H / 4, W / 2, H / 2);
    var x, y, w, h;
    x = y = 0;
    w = h = 40;
    var r = parseInt(H / h);
    var c = parseInt(W / w);

    /*}
    for(var i = 0; i < r; i++){
        if (i % 2 === 0){
            ctx.fillStyle = "rgb(0,255,0)";
        }else{
            ctx.fillStyle = "rgb(0,0,255)";
        }
        y = i * h;
        ctx.fillRect(x, y, w, h);
    }
    */
    for(var i = 0; i < r; i++){
          y = i * h;
        if (i % 2 === 0){
            for(var j = 0; j < c; j++){
                if (j % 2 === 0){

                    ctx.fillStyle = "rgb(255,0,0)";
                }else{
                     ctx.fillStyle = "rgb(184,3,255)";
                }
                x = j * w;
                ctx.fillRect(x, y, w, h);
            }
        }else{
            for(var j = 0; j < c; j++){
                if (j % 2 !== 0){
                    ctx.fillStyle = "rgb(255,0,0)";
                }else{
                     ctx.fillStyle = "rgb(184,3,255)";
                }
                x = j * w;
                ctx.fillRect(x, y, w, h);
            }

        }

    }
</script>


</body>
</html>