How to design a dynamic chess board and place icon on it

Folks,

Are you looking for a dynamic chess board pattern with your own selection of colors and after that to place some icon on it?? Then please find below image and code. Its purely canvas and javascript

18-06-2014 16-17-09

Code:

<!DOCTYPE html>
<html>
<body >
Welcome to Chess Board !!
Please enter the below details to print rows and columns of your board with your desired box size..<br/>
    <blockquote style="border: 1px solid;width: 400px;margin: 20px;padding: 25px;">
    <label for="rows">Rows: <input value="5" type="number" id="rowvalue" ></label><br/>
    <label for="cols">Columns: <input value="5" type="number" id="colvalue" ></label><br/>
    <label for="cols">SquareBox: <input value="55" type="number" id="boxvalue" ></label><br/>
      <label for="cols">Box 1: <input type="color" id="color1" value="#000000"></label>  <br/>
        <label for="cols">Box 2: <input type="color" id="color2" value="#ffffff"></label>  <br/>
        <label for="cols">Circle Color: <input type="color" id="color3" value="#999999"></label>  <br/>
    <button onclick="myChess()" type="submit">Submit</button><br/>
        </blockquote>
<canvas id="chessboardCanvas" style="border:1px solid #000; margin: 30px;">
Your browser does not support the HTML5 canvas tag.
</canvas>
 
<script>
    function getSqureVal() {
        var rowin = document.getElementById('rowvalue').value;
        var colin = document.getElementById('colvalue').value;
        var sqbox = document.getElementById('boxvalue').value;
        var color1 = document.getElementById('color1').value;
        var color2 = document.getElementById('color2').value;
        var color3 = document.getElementById('color3').value;
        return { rowin: rowin, colin: colin, sqbox: sqbox, color1: color1, color2: color2, color3: color3 };
    }
// to get mouse position on canvas
    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
    function myChess() {
        var canvas = document.getElementById("chessboardCanvas");
        var context = canvas.getContext("2d");
        var vals = getSqureVal();
        var rowin = vals.rowin;
        var colin = vals.colin;
        var sqbox = vals.sqbox;
        var color1 = vals.color1;
        var color2 = vals.color2;
        var color3 = vals.color3;
        var bgcolor = document.querySelector("#chessboardCanvas");
        bgcolor.style.backgroundColor = color1;
        rectwid = colin * sqbox;
        recthei = rowin * sqbox;
        canvas.width = rectwid;
        canvas.height = recthei;
        context.fillStyle = color2;
        console.log(canvas.width / 5);
        console.log(canvas.height / 5);
        // document.getElementsByTagName("canvas")[0].setAttribute("id","one");
        function writeMessage(canvas, message) {
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            //context.font = '18pt Calibri';
            //  context.fillStyle = 'black';
            context.fillText(message, 10, 25);
        }
 
 
 // adding event listener - onclick place circle on that box
        canvas.addEventListener('click', function (evt) {
            onCanvasClicked(evt, canvas, context);
        }, false);
 
        for (var a = 0; a < rowin; a++) {
            for (var i = 0; i < colin; i += 2) {
                startX = i * sqbox;
                if (a % 2 == 0) {
                    startX = (i + 1) * sqbox;
                }
 
                context.fillRect(startX, (a * sqbox), sqbox, sqbox);
 
            }
        }
 
 
 
    }
    function onCanvasClicked(evt, canvas, context) {
        var mousePos = getMousePos(canvas, evt);
        var vals = getSqureVal();
        var rw = rh = vals.sqbox;
        var point1 = rw / 2;
        var point2 = rh / 2;
        var c = (rw + point1) / 2;
        var d = (rh + point2) / 2;
        // var newcol = vals.color3;
        var a = mousePos.x / vals.sqbox;
        var b = mousePos.y / vals.sqbox;
        a = a != Math.round(a) ? parseInt(a) + 1 : a;
        b = b != Math.round(b) ? parseInt(b) + 1 : b;
        //var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        // writeMessage(canvas, message);
        console.log(a, b);
        console.log(mousePos.x, mousePos.y);
        context.beginPath()
        context.arc(((a*2)-1) * point1, ((b*2)-1)* point1, rw / 3, 0, 2 * Math.PI, false);
        context.fillStyle = vals.color3;
        context.fill();
        //context.lineWidth = 2;
        //context.strokeStyle = '#003300';
        context.stroke();
    }
</script>
 
</body>
</html>
 
 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s