Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 5 123 ... LastLast
Results 1 to 15 of 71

Thread: Canvas Problem

  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Canvas Problem

    I'm delving into canvas now, pretty simple switch from creating a map with HTML divs to canvas.

    Problem though, I'm using 2 for loops inside one another to increment each tile. here is the code, For some reason I am getting a error.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    
    #my_canvas{
    	border: 1px solid black;
    	-moz-transform: skew(-50deg,25deg);
    	position: relative;
    	top: 150px;
    	left: 200px;
    	
    }
    #myguy{
    	left: 0;	
    	position: absolute;
    	
    }
    #grass{
    	height: 50px;
    	width: 50px;
    	background: url(new/grass.png):
    	position: relative;
    	float: left;
    }
    
    </style>
    
    </head>
    <body>
    
    <canvas id="my_canvas" width="600" height="400"></canvas>
    
    <script type="text/javascript">
    
    var canvas=document.getElementById('my_canvas');
    var context=canvas.getContext("2d");
    
    
    
    var guyLeft=0;
    var guyTop= 0;
    
    var map=[
    "1111111111",
    "1000001100",
    "1000001111",
    "1100001001",
    "1100001001",
    "0000001001",
    "1111111011",
    "1111111111",
    "1111000111",
    "1111111111"
    
    ];
    
    var x=0;
    var y=0;
    
    var tilePos=-25;
    var tileTop=0;
    var tileTopCount=0;
    
    
    
    
    function drawMap(){
    map[x][y];
    for(x=0; x <= map.length; x++){
    
    	for(y=0; y <= map[x].length; y++){
    		
    		var tile=new Image();
    		tilePos+=25;	//increment the tile position by 25
    	
    		if(parseInt(map[x][y])===1){
    			tile.src="new/grass.png";
    			context.drawImage(tile,tilePos,tileTop);
    			
    			
    		}
    		if(parseInt(map[x][y])===0){
    			tile.src="new/cement.jpg";
    			context.drawImage(tile,tilePos,tileTop);
    			
    			
    		}
    		
    			tileTopCount++;
    
    			if(tileTopCount===map[x].length){
    				tileTop +=25;
    				tileTopCount=tileTopCount-map[x].length-1;
    				tilePos=-50;
    			}
    		
    
    	}
    
    }
    
    }
    
    
    function clearCanvas(){
    	canvas.width = canvas.width;
    }
    
    
    drawMap();
    
    
    </script>
    
    
    </body>
    </html>
    I keep getting at error at the second for loop statement that map[x].length is undefined, anyone know why?

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    background: url(new/grass.png): << this should be a semi-colon
    I'm not sure what you are attempting with this line:
    Code:
    map[x][y];
    but it looks redundant and should be deleted.

    The main issue is that you are attempting to read an element beyond the last one (<= length):

    Code:
    for(x=0; x <= map.length; x++){
    // should be
    for(x=0; x < map.length; x++){
    BTW Your page should have a <title> as well

    BTWW I understand it is preferable to use the following to clear the canvas:

    Code:
    context.clearRect(0, 0, canvas.width, canvas.height);
    Last edited by AndrewGSW; 12-04-2012 at 10:14 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    you have got three equals in the line

    Code:
    if(tileTopCount===map[x].length){
    and in another line above too, are three equals allowed???

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,388
    Thanks
    11
    Thanked 565 Times in 558 Posts
    Quote Originally Posted by donna1 View Post
    you have got three equals in the line

    Code:
    if(tileTopCount===map[x].length){
    ???
    Which means "strictly equal", so value and type must be equal.

  • #5
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    what do the lines beginning with # do?
    like #myguy ?

    also sometimes Ive seen lines beginning with $ - is that javascript or something else?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    In CSS, you use a period (.) to indicate "match on class name" and the octothorp (#) to indicate "match on id".

    So:
    Code:
    <html>
    <head>
    <style type="text/css">
    .funky {
        color : magenta;
        background-color : lime; 
    }
    #butNotMe {
        color : black; 
        backgroundColor : white;
    }
    </style>
    </head>
    <body>
    <div class="funky" id="woof">This text will show purple on green</div>
    <div class="funky" id="butNotMe">This text will be black on white</div>
    <div class="funky" id="zing">Back to purple on green</div>
    </body>
    </html>
    How did you get started in JavaScript, mucking with things like canvas and more, and completely bypass the fundamentals of HTML and CSS??

    I think it would be worth your while to go back and catch up on HTML and CSS.

    Oh, and by the way, this question has nothing to do with JavaScript.
    (Though jQuery uses "." and "#" in the same way as "selectors".)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    donna1 (12-05-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, and the stuff with $ is *LIKELY* jQuery. A JavaScript library.

    In jQuery, you use
    Code:
        $("#butNotMe")
    as a shorthand for
    Code:
        document.getElementById("butNotMe")
    By and of itself, that's not a huge advantage.

    But jQuery also allows you to use
    Code:
       $(".funky")
    as a short hand for
    Code:
        document.getElementsByClassName("funky")
    and then IN EITHER CASE allows you to write code that affects *ALL* the elements found (whether only one when "#" is used of hundreds when "." is used).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New Coder donna1's Avatar
    Join Date
    Nov 2012
    Location
    london
    Posts
    99
    Thanks
    9
    Thanked 4 Times in 4 Posts
    I skipped CSS and HTML because I don't like them, javascript seems ok

    I don't like JQuery either.

    Why do you call a Hash # an Octothorp ?
    .. is that to make it sound more complicated and keep yourself in a job? lol

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @Old Pedant octothorpe
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Hey, octothorp/octothorpe/octotherp was around for many many years before programmers ever started calling it the "hash symbol". It never had been in usage in the USA before you Brits started calling it that.

    It was actually called the "pound sign" when I was a kid, meaning weight in pounds (you know, those things you Brits invented, foisted off on us, and then abandoned!). That is, we used to commonly write 37# (pr sometimes #37) meaning 16.8kg.

    Anyway, I started programming in the 1960s, so octothorp is appropriate for me!
    http://en.wiktionary.org/wiki/octothorpe

    *************

    So far as I am concerned, JavaScript is useless without completely understanding HTML and CSS. You will keep on asking questions like this because even JavaScript programmers *NEED* to know how the underlying HTML and CSS work to be effective. You are running around with blinders on (or that another Americanism?) if you fail to learn HTML and CSS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by AndrewGSW View Post
    @Old Pedant octothorpe
    Debatable.

    http://en.wiktionary.org/wiki/octothorpe
    http://en.wikipedia.org/wiki/Number_sign

    But yeah, octothorpe is probably more common.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @Old Pedant
    I thought you would respond/reposte
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #13
    Regular Coder
    Join Date
    Jun 2010
    Posts
    121
    Thanks
    0
    Thanked 3 Times in 3 Posts
    What could you even do without HTML and CSS in javascript? I thought the whole point of it was to manipulate HTML elements and their styles. AS far as I know that is.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    donna1 seems to be only concerned with drawing shapes and stuff on a canvas.

    So I suppose if you are not interested in anything else you could get away with just learning one of the drawing libraries for canvas.

    But man, it sure is self-limiting, isn't it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by AndrewGSW View Post
    @Old Pedant
    I thought you would respond/reposte
    Hey, at least I admitted your spelling was more common! <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 5 123 ... LastLast

    Posting Permissions

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