Flash Website Builder- Trendy Site Builder is a Flash Site Building tool that helps users build stunning websites. Check Out Custom Custom Logo Design by LogoBee. Website Design and Free Logo Templates available.
 CodingForums.com Canvas Problem

Before you post, read our: Rules & Posting Guidelines

Enjoy an ad free experience by logging in. Not a member yet? Register.
12-05-2012, 02:28 AM   PM User | #31
pdiddles03
Regular Coder

Join Date: Jun 2010
Posts: 112
Thanks: 0
Thanked 2 Times in 2 Posts
Quote:
 Originally Posted by Old Pedant Because you coded something wrong? How can we guess without seeing your code?
look at my first post, I am the starter of the thread.

 12-05-2012, 02:47 AM PM User | #32 donna1 New Coder     Join Date: Nov 2012 Location: london Posts: 99 Thanks: 9 Thanked 4 Times in 4 Posts Not sure why you reset your x coord, tilePos = -50 when you draw the next line? Thats off the canvas Easier - just have the x coordinate as x*25 or even 40+x*25 (say if you want a 40 pixel margin) similarly your tileTop (y) coordinate could just be y*25 it will save you doing all the tilePos counting which is where the error is anyway. Also you reset your image and reload your picture source every turn of the loop. That would be better done before the for loops start! See 3 posts Below for my re-write! Last edited by donna1; 12-05-2012 at 03:06 AM..
12-05-2012, 02:59 AM   PM User | #33
Old Pedant
Supreme Master coder!

Join Date: Feb 2009
Posts: 24,949
Thanks: 75
Thanked 4,307 Times in 4,274 Posts
Quote:
 Originally Posted by donna1 ... a statement like A=B=C=7 doesnt make any sense anyway ...
First of all, it *does* make sense.

In JavaScript, you would write it as
Code:
`    A = B == C == 7;`
And it means
Code:
`   A = ( ( B == C ) == 7 )`
which means that A will always end up being false, because you are comparing a boolean (true/false result of comparing B and C) to an integer. But that doesn't mean the construction is useless. I purposely created a pathological case.

*******************
Quote:
 in my language you couldnt have a statement like A=B=C=7
When you get a few years experience, if you really want to create a braindead language that doesn't allow that, you can. Just don't expect anybody to then use 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.

12-05-2012, 03:01 AM   PM User | #34
Old Pedant
Supreme Master coder!

Join Date: Feb 2009
Posts: 24,949
Thanks: 75
Thanked 4,307 Times in 4,274 Posts
Quote:
 Originally Posted by pdiddles03 look at my first post, I am the starter of the thread.
LOL! Sorry! Mea maxima culpa! I thought I was answering donna1.

Let me go look again.

__________________
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-05-2012, 03:04 AM PM User | #35 donna1 New Coder     Join Date: Nov 2012 Location: london Posts: 99 Thanks: 9 Thanked 4 Times in 4 Posts Ive already rewritten it in perfect javascript lol Code: ```var grass=new Image(); var cement=new Image(); grass.src="new/grass.png"; cement.src="new/cement.jpg"; for(x=0; x < map.length; x++){ for(y=0; y < map[x].length; y++){ if(parseInt(map[x][y])==1){ context.drawImage(grass,x*25,y*25);} else{ context.drawImage(cement,x*25,y*25);} } }``` Last edited by donna1; 12-05-2012 at 03:11 AM..
 12-05-2012, 03:31 AM PM User | #36 Old Pedant Supreme Master coder!     Join Date: Feb 2009 Posts: 24,949 Thanks: 75 Thanked 4,307 Times in 4,274 Posts There are several things in your code that don't make sense. For instance, you *SEEM* to specify that the size of a "grass" image is 50x50 pixels. You *SEEM* to do that here: Code: ```#grass{ height: 50px; width: 50px; background: url(new/grass.png): position: relative; float: left; }``` But that's all wrong, because you are using #grass so that style will *ONLY* affect an element which has id="grass". If it was meant to affect MANY elements, it should have been specified as .grass and then the elements would use class="grass". In any case, when you increment the positions where you draw the images, you only increase by 25 pixels to the right and down. The increases *MUST* match the sizes of the images you are dropping in there. When you reset the tilePos you do Code: ` tilePos=-50l` yet in the initialization code you did Code: `var tilePos=-25;` But both of them needlessly complicate matters. __________________ 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-05-2012, 03:37 AM   PM User | #37
Old Pedant
Supreme Master coder!

Join Date: Feb 2009
Posts: 24,949
Thanks: 75
Thanked 4,307 Times in 4,274 Posts
Quote:
 Originally Posted by donna1 Ive already rewritten it in perfect javascript lol Code: ```var grass=new Image(); var cement=new Image(); grass.src="new/grass.png"; cement.src="new/cement.jpg"; for(x=0; x < map.length; x++){ for(y=0; y < map[x].length; y++){ if(parseInt(map[x][y])==1){ context.drawImage(grass,x*25,y*25);} else{ context.drawImage(cement,x*25,y*25);} } }```
That's very close to what I was going to do.

A little more efficient:
Code:
```var grass=new Image();
var cement=new Image();
grass.src="new/grass.png";
cement.src="new/cement.jpg";

for(x=0; x < map.length; x++)
{
var line = map[x];
for(y=0; y < line.length; y++)
{
context.drawImage( line[y] == "1" ? grass : cement  x*25, y*25);
}
}```
No reason to parseInt() the "1"/"0" value. Just compare the cell contents to a string instead of a number!

In x*25 and y*25: naturally, the 25's there need to match the actual height (x) and width (y) of the image.

Which suggests that for clarity we should swap the usage of x and y.
__________________
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.

Last edited by Old Pedant; 12-05-2012 at 03:40 AM..

 12-05-2012, 03:44 AM PM User | #38 Old Pedant Supreme Master coder!     Join Date: Feb 2009 Posts: 24,949 Thanks: 75 Thanked 4,307 Times in 4,274 Posts What the heck... Code: ```var cellWidth = 25; var cellHeight = 25; var grass=new Image(); var cement=new Image(); grass.src="new/grass.png"; grass.width = cellWidth; grass.height = cellHeight; cement.src="new/cement.jpg"; cement.width = cellWidth; cement.height = cellHeight; for( row=0; row < map.length; ++row) { var line = map[row]; for( column=0; column < line.length; ++column ) { context.drawImage( line[column] == "1" ? grass : cement, column*cellWidth, row*cellHeight ); } }``` That's actually getting readable. __________________ 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-05-2012, 01:55 PM PM User | #39 pdiddles03 Regular Coder   Join Date: Jun 2010 Posts: 112 Thanks: 0 Thanked 2 Times in 2 Posts Thanks for your help! I'll study both your solutions when I have a lil more time.
 12-05-2012, 08:21 PM PM User | #40 Old Pedant Supreme Master coder!     Join Date: Feb 2009 Posts: 24,949 Thanks: 75 Thanked 4,307 Times in 4,274 Posts The beauty of this solution is that you could expand it to many types of "terrain". Example: Code: ```var terrain { "g" : "grass.png", "c" : "cementjpg", "m" : "mountain.gif", "w" : "water.jpg", "t" : "town.png" }; var map = [ "mmmmmwwwww", "mmggcctttw", .... etc. ... ]; var cellWidth = 25; var cellHeight = 25; // replace strings with image objects: for ( var c in terrain ) { var pic = new Image(); pic.src = "new/" + terrain[c]; pic.width = cellWidth; pic.height = cellHeight; terrain[c] = pic; } // draw terrain: for( row=0; row < map.length; ++row) { var line = map[row]; for( column=0; column < line.length; ++column ) { var image = terrain[ line[ column ] ]; context.drawImage( image, column*cellWidth, row*cellHeight ); } }``` __________________ 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-05-2012, 10:50 PM PM User | #41 pdiddles03 Regular Coder   Join Date: Jun 2010 Posts: 112 Thanks: 0 Thanked 2 Times in 2 Posts So now I have another question, not to do with the programming side but canvas again. How efficient is it for a browser to render a game in canvas seeing every time you make a change, you have to clearthe canvas and then redo everything by calling the same functions. Wouldn't just having the DIV tags an programming their styles through CSS and Javascript be a lot simpler and make the browser faster? I noticed by right clicking that basically your browser renders everything you did in javascript just a whole image.
 12-05-2012, 11:02 PM PM User | #42 Old Pedant Supreme Master coder!     Join Date: Feb 2009 Posts: 24,949 Thanks: 75 Thanked 4,307 Times in 4,274 Posts Well sure. Esp. if you are creating the game background via some server-side code (PHP/JSP/ASP/etc.) it would make more sense to just generate a bunch of tags inside a
. Done correctly, the images would automatically show 10 per row. The only reason I could see to use canvas like this (and even then I'm not sure it's a better choice then s in a
) would be because you are downloading new maps via, say, AJAX and/or you are generating the maps using logic (semi-random??) in JS code. __________________ 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-05-2012, 11:03 PM PM User | #43 Old Pedant Supreme Master coder!     Join Date: Feb 2009 Posts: 24,949 Thanks: 75 Thanked 4,307 Times in 4,274 Posts Oh...and you don't *HAVE* to clear the canvas and start over for *ANY* change. Say you wanted to change one cell from grass to concrete: You could do that by just re-writing that part of the canvas. Or, if you didn't use a canvas, by just changing the src property of one of your tags. __________________ 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-05-2012, 11:22 PM PM User | #44 pdiddles03 Regular Coder   Join Date: Jun 2010 Posts: 112 Thanks: 0 Thanked 2 Times in 2 Posts So ok, let's say I have my map all written out and generated. Next, i put my character on top, how would I go about clearing just the character when I move him, and not the map?
 12-05-2012, 11:39 PM PM User | #45 devnull69 Senior Coder   Join Date: Dec 2010 Posts: 2,353 Thanks: 11 Thanked 557 Times in 550 Posts You could use another, smaller canvas on top of the other, so you'd only have to manipulate that canvas (clear, redraw, move).

 Bookmarks

 Thread Tools Rate This Thread Rate This Thread: 5 : Excellent 4 : Good 3 : Average 2 : Bad 1 : Terrible

 Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules
 Forum Jump User Control Panel Private Messages Subscriptions Who's Online Search Forums Forums Home :: Client side development     JavaScript programming         DOM and JSON scripting         Ajax and Design         JavaScript frameworks         Post a JavaScript     HTML & CSS     XML     Flash & ActionScript         Adobe Flex     Graphics and Multimedia discussions     General web building         Site reviews         Building for mobile devices :: Server side development     Apache configuration     Perl/ CGI     PHP         Post a PHP snippet     MySQL         Other Databases     Ruby & Ruby On Rails     ASP     ASP.NET     Java and JSP     Other server side languages/ issues         ColdFusion         Python :: Computing & Sciences     Computer Programming     Computer/PC discussions     Geek News and Humour Web Projects and Services Marketplace     Web Projects         Small projects (quick fixes and changes)         Medium projects (new script, new features, etc)         Large Projects (new web application, complex features etc)         Unknown sized projects (request quote)         Vacant job positions         Looking for work/ for hire         Project collaboration/ partnership         Paid work offers and requests (Now CLOSED)     Career, job, and business ideas or advice     Domains, Sites, and Designs for sale         Domains for sale         Websites for sale         Design templates and graphics for sale :: Other forums     Member Offers     Forum feedback and announcements

All times are GMT +1. The time now is 04:34 AM.