Untitled

<!doctype html>
<html>

<head>
    <title>rectExample</title>
    <meta charset='utf-8' />
</head>

<body>
    <canvas id='example'>Обновите браузер</canvas>
    <script type="text/javascript">
        function collides(rects, x, y) {
            var isCollision = false;
            for (var i = 0, len = rects.length; i < len; i++) {
                var left = rects[i].x,
                    right = rects[i].x + rects[i].w;
                var top = rects[i].y,
                    bottom = rects[i].y + rects[i].h;
                if (right >= x &&
                    left <= x &&
                    bottom >= y &&
                    top <= y) {
                    isCollision = rects[i];
                }
            }
            return isCollision;
        }

        function makeMosaic(ElemsCols, ElemsRows, CanvasWidth, CanvasHeigth) {
            function isFloat(n) {
                return n === +n && n !== (n | 0);
            }
            var example = document.getElementById("example"),
                ctx = example.getContext('2d');
            ctx.canvas.width = CanvasWidth; //window.innerWidth;
            ctx.canvas.height = CanvasHeigth; //window.innerHeight;
            var width = screen.width;
            var height = screen.height;
            //alert(width);
            //alert(height);
            var marginLeft = (width / 2);
            var marginTop = (height / 2);
            //alert(marginLeft);
            var BgHeight = marginTop - 50;
            var BgWidth = marginLeft - 50;
            var PosX = ctx.canvas.width / 2 - BgWidth / 2;
            var PosY = ctx.canvas.height / 2 - BgHeight / 2;

            //cxt.drawImage(image,
            // canvas.width / 2 - image.width / 2,
            // canvas.height / 2 - image.height / 2
            //ctx.fillRect(posX,posY, 20, 20);
            //ctx.strokeRect(posY - 50, 5, 50, 50);
            ctx.lineWidth = 5;
            ctx.strokeRect(PosX, PosY, BgWidth, BgHeight);
            var ElemsWidth = ElemsCols; //кол-во элементов в ширь
            var ElemsHeight = ElemsRows; // в высь


            var elmHeight = BgHeight / ElemsHeight;
            var elmWidth = BgWidth / ElemsWidth;

            if (ElemsHeight == 1) {
                elmHeight = (BgWidth / 4) * 3;
                elmHeight = (elmHeight / ElemsWidth);
            }
            if (ElemsWidth == 1) {
                elmWidth = (BgHeight / 3) * 4;
                elmWidth = (elmWidth / ElemsHeight);
            }

            var topStep = PosY;
            var leftStep = PosX;

            if (isFloat(elmHeight)) {
                elmHeight = Math.round(elmHeight);
            }

            if (isFloat(elmWidth)) {
                elmWidth = Math.round(elmWidth);
            }


            var rects = [];

            var i, k = 0;
            ctx.lineWidth = 1;
            //document.write('<MAP NAME="mosaic_editor">');
            for (i = 0; i != ElemsHeight; i++) {
                //for ($i = 0; $i != $height_elm; $i++) {
                for (k = 0; k != ElemsWidth; k++) {
                    ctx.strokeRect(leftStep, topStep, elmWidth, elmHeight);
                    var rect = {
                        x: leftStep,
                        y: topStep,
                        w: elmWidth,
                        h: elmHeight
                    }
                    rects.push(rect);
                    //<AREA SHAPE="RECT" COORDS="0, 0, 16, 16" HREF="S1.html">
                    //document.write('<AREA style="display:block;" SHAPE="RECT" COORDS="'+leftStep+','+topStep+','+elmWidth+','+elmHeight+'" HREF="?'+leftStep+'" />');
                    console.log("left = " + leftStep + "topStep =" + topStep + "Width = " + elmWidth + "Height =" + elmHeight);
                    leftStep += elmWidth;
                    //for ($k = 0; $k != $width_elm; $k++) {
                }
                topStep += elmHeight;
                leftStep = PosX;
            }
            //document.write('</MAP>');
            example.addEventListener('click', function(e) {
                console.log('click: ' + e.offsetX + '/' + e.offsetY);
                var rect = collides(rects, e.offsetX, e.offsetY);
                if (rect) {
                    console.log('collision: ' + rect.x + '/' + rect.y);
                } else {
                    console.log('no collision');
                }
            }, false);
        }
        makeMosaic(3, 3, window.innerWidth, window.innerHeight);
    </script>
</body>

</html>