Canvas Problem

pdiddles03 · 12-04-2012, 09:42 PM

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?

AndrewGSW · 12-04-2012, 10:06 PM

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);

donna1 · 12-04-2012, 10:12 PM

you have got three equals in the line

Code:

if(tileTopCount===map[x].length){

and in another line above too, are three equals allowed???

devnull69 · 12-04-2012, 10:14 PM

Quote:

Originally Posted by donna1

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.

donna1 · 12-04-2012, 11:45 PM

what do the lines beginning with # do?
like #myguy ?

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

Old Pedant · 12-04-2012, 11:51 PM

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".)

Old Pedant · 12-04-2012, 11:55 PM

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).

donna1 · 12-05-2012, 12:02 AM

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

AndrewGSW · 12-05-2012, 12:07 AM

@Old Pedant octothorpe

Old Pedant · 12-05-2012, 12:15 AM

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.

Old Pedant · 12-05-2012, 12:16 AM

Quote:

Originally Posted by AndrewGSW

@Old Pedant octothorpe

Debatable.

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

But yeah, octothorpe is probably more common.

AndrewGSW · 12-05-2012, 12:21 AM

@Old Pedant
I thought you would respond/reposte

pdiddles03 · 12-05-2012, 12:25 AM

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.

Old Pedant · 12-05-2012, 12:56 AM

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.

Old Pedant · 12-05-2012, 12:57 AM

Quote:

Originally Posted by AndrewGSW

@Old Pedant
I thought you would respond/reposte

Hey, at least I admitted your spelling was more common! <grin/>