Why isn't Canvas displaying?

**hsfrey** · Apr 26, 2010 16:58

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?

Code:

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

**paul_wilkins** · Apr 26, 2010 17:21

When you look at the scripting console, you will be told what is missing.

**hsfrey** · Apr 26, 2010 17:34

I have looked at the scripting console!

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.

**paul_wilkins** · Apr 26, 2010 17:44

Which browsers are you checking??

Google Chrome
Ctrl+Shift+J

canvas.html:24 Uncaught ReferenceError: tractId is not defined

Mozilla Firefox
Ctrl+Shift+J

Error: tractId is not defined
Source File: file:///C:/Users/Paul/Desktop/sitepoint/canvas.html
Line: 24

What is tractId?

**hsfrey** · Apr 26, 2010 18:43

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.

**paul_wilkins** · Apr 26, 2010 18:50

It would help us to help you if you provide a way for us to experience the same problem that you are experiencing.

If it's not simple enough to copy/paste, the most common way to do this is to provide a link to a page that demonstrates the problem.

**hsfrey** · Apr 26, 2010 21:13

OK, I've uploaded the program and the data to my website, and it works as poorly there as it does offline.

Go to http://www.harp.org/online.html

**paul_wilkins** · Apr 26, 2010 21:48

Thank you for that. You'll be able to see results when you apply each stroke to the canvas.

Code javascript:

ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.stroke();

**hsfrey** · Apr 26, 2010 23:06

Thanks Paul, but it still shows nothing, whether I put the ctx.stroke(); before or after the ctx.closePath();

And the console doesn't say a thing.

**paul_wilkins** · Apr 26, 2010 23:22

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.

Code html4strict:

<head> 
<base href="http://www.harp.org/online.html">
<title>plotTracts</title>

Change 2 is the added stroke line.

Code javascript:

ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.stroke();

And results in the following display:

**hsfrey** · Apr 26, 2010 23:34

I'm using Firefox 3.6.3.

I may be a newbie, but not so much of a newbie as to use Internet Explorer. ;-)

It can't be that I don't have Canvas, since the 1000 px square canvas gets put up and filled with the background blue color.

**paul_wilkins** · Apr 26, 2010 23:36

Well try something completely crazy, and place my suggested updated (the stroke line) up on the test page at http://www.harp.org/online.html

**hsfrey** · Apr 26, 2010 23:46

Paul:

AHA!

The ctx.stroke() DOES work!

I added it to the version I named online, but kept running the old version.

Thank you!

User Tag List

Thread: Why isn't Canvas displaying?

Thread Tools

Display

Why isn't Canvas displaying?

Bookmarks

Bookmarks

Posting Permissions