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!
<!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>