In the following simple program, the canvas background is displayed, and the console log shows that I’m executing the graphics script with the proper data, but nothing is plotted.
Any ideas why not?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>plotTracts</title>
<link type="text/css" href="LIB\\ui.theme.css" rel="stylesheet" />
<script src="LIB\\jquery-1.3.2.js"></script>
<script src="LIB\\ui.core.js"></script>
<script src="LIB\\Geometry.js"></script>
<script>
canvasColor = "#ddddff";
mag = 1; // magnification
function setUpCanvas(){
canvas = document.getElementById("myCanvasTag");
ctx = canvas.getContext('2d');
ctx.fillStyle = canvasColor;
ctx.fillRect (0, 0, 5000, 5000);
// PLOT THE CENSUS TRACTS
for (var nn=1; nn<tractId.length ;nn++ )
{ plotTract(nn, -1); }
}
function plotTract(nn, color) {
var x = mag * tractX[nn]; //later can center it
var y = mag * tractY[nn];
var r = mag * Math.sqrt(tractPop[nn]) / 5;
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
safelog(nn + ": called ctx.arc(" + x + ", " + y + ", " + r + ")");
ctx.closePath();
color = "#ff0000";
if (color > -1)
{ ctx.fillStyle = color;
ctx.fill();
}
}
</script>
<script>
function safelog(msg)
{ if (window.console) { console.log(msg); } }
</script>
<script>
lastX=0; lastY=0; // globals to save last click loc
UpArrow=38; DownArrow=40; RightArrow=39; LeftArrow=37; //keyCodes
PageUp=33; PageDown=34; HomeKey=36; EndKey=35;
function saveCoords(e){lastX=e.pageX; lastY=e.pageY; }
</script>
</head>
<body onload="setUpCanvas()" onkeypress="keyHandler(event)" onmousedown="saveCoords(event)">
<script src="tracts.js" ></script> <!-- Load data arrays tractId, tractPop, tractX, tractY, tractAdj -->
<canvas id="myCanvasTag" width="1000" height="1000"></canvas>
</body>
</html>
No error messages are displayed in the console! You can see that I execute the log command in plotTract, and I get that message displayed, so there’s nothing wrong with log.
The line right after the head tag loads tracts.js, which is a JSON file with a bunch of large arrays, one of which is tractId (as the comment notes). You didn’t find it because I didn’t send along the JSON file because it’s 646 KB, and I don’t know how to upload data anyway.
On my machine, it was found, and the contents were properly printed out by the log statement in the plotTract function.
If you want to try to run the program, you’d have to define arrays tractId, tractPop, tractX, and tractY, and give it some dummy data.
tractX & tractY values were between 100 & 1000, and tractPop between 0 and 18000.
In any case, I assure you that the data were read in and passed to the arc statement and echoed in the console.
Are you using Internet Explorer?
I have successfully tested it on Google Chrome and Mozilla Firefox.
The test code is the same as that from your provided link, but for two changes.
Change 1 uses the BASE tag to allow local test code to be run as if it were on the actual site.
You should NOT make this change to code on the actual web site.
