SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Why isn't Canvas displaying?

    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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    When you look at the scripting console, you will be told what is missing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    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

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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:

    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,708
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Paul:

    AHA!

    The ctx.stroke() DOES work!

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

    Thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •