problem in grid of circles ,javascript, html5

Question

0.00/5 (No votes)

See more:

I am creating a grid of circles but it not giving me exact grid that i want. distance between [0,0]--[0,100] and [0,0]--[100,0] is different.

C#

$(document).ready(function () {

    var canvas = document.getElementById("mainCanvas");
    var context = canvas.getContext("2d");
    var playerImage = new Image();

    playerImage.onload = function () {

        var delta =100;
        var i = 0;
        var j = 0;
        for (;i <= 500;) {
            for (;j <= 500;) {
                context.drawImage(this, j, i, 5, 5);
                context.fillText("" + j + "," + i + "", i, j+20);
                j = j + delta;

            }
            j = 0;
            i = i + delta;
        }


    }
    playerImage.src = "Images/player1.png";



});

---------

XML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/BkScript.js"></script>
    <style>
        #mainCanvas
        {
            width:500px;
            height:500px;
            background-color:#34ba74;
        }

    </style>
</head>
<body>
    <div id="container">
        <center>
            <canvas id="mainCanvas"></canvas>
        </center>

    </div>

</body>
</html>

Posted 8-Dec-13 2:59am

footballpardeep

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Accepted Answer · 2013-12-08T04:44:00

When you set the width and height of the canvas using the css, it changes the size that the canvas will be displayed at. It does not however, change the number of pixels that the canvas will contain.

The default size for a canvas (only tested with 1 machine/os/browser - win7 Chrome) is 300x150px.
So, when you set the css rule to make it 500 by 500, you're stretching it more in the y direction than the x. This is why the points are (visually) twice as far apart in the Y direction than they are in the X.

There is a very simple fix for this.
1) Remove the width and height from the css rule
2) Add canvas.width = canvas.height = 500; between where you get the canvas and where you get its context.

Sample: (removed jQuery reference for sake of a complete example and bandwidth when running page, code pasted into a template blank.html I have) - don't forget to change the image source back too!

XML

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    var index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    var canvas = byId("mainCanvas");
    canvas.width = canvas.height = 500;
    var context = canvas.getContext("2d");
    var playerImage = new Image();

    playerImage.onload = function () {

        var delta =100;
        var i = 0;
        var j = 0;
        for (;i <= 500;) {
            for (;j <= 500;) {
                context.drawImage(this, j, i, 5, 5);
                context.fillText("" + j + "," + i + "", i, j+20);
                j = j + delta;

            }
            j = 0;
            i = i + delta;
        }


    }
    playerImage.src = "img/redBaron.jpg";
}

</script>
<style>
#mainCanvas
        {
  /*          width:500px;
            height:500px;  */
            background-color:#34ba74;
        }
</style>
</head>
<body>
    <div id="container">
        <center>
            <canvas id="mainCanvas"></canvas>
        </center>

    </div>
</body>
</html>