www.webdeveloper.com
Results 1 to 6 of 6

Thread: Tile map images not loading on canvas

  1. #1
    Join Date
    Jan 2014
    Posts
    3

    Question Tile map images not loading on canvas

    I have tried to get this code to work (example from pdiddles03 youtube-tutorial)
    Once I run the code on Chrome I only see blank canvas borders. I have html -file and both image files on my desktop, so no sub folders. I have gone through the code multiple times and tried to find where I have gone wrong, but without luck. Should I add somewhere grass.onload = function() AND sand.onload = function() ?

    I would appreciate if you could add them or any solution to the code below. I just started learning JS week ago and some advises will go over my head. Best way for me to learn is to see when the actual code has been changed.



    Below full code:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Canvas Tile Map</title>
    <style>
    #canvas{
    border: 1px solid red;}
    </style>
    </head>

    <body>

    <canvas id="canvas" height="400px" width="500px"></canvas>

    <script>

    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');


    var mapArray=[
    [0,0,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,0,1,1,1,1,0,0]
    ];

    var grass=new Image();
    var sand=new Image();



    grass.src='grass.png';
    sand.src='sand.png';

    var posX=0;
    var posY=0;


    for(var i=0; i < mapArray.length; i++){
    for(var j=0; j < mapArray[i].length; j++){

    if(mapArray[i][j]==0){
    context.drawImage(grass, posX, posY, 32,32);
    }
    if(mapArray[i][j]==1){
    context.drawImage(sand, posX, posY, 32,32);
    }
    posX+=32;
    }
    posX=0;
    posY+=32;
    }

    </script>
    </body>
    </html>

  2. #2
    Join Date
    Jan 2014
    Posts
    3
    Forgot to say. When I check on chrome there are no errors when I check developer tools. It would be a big help if someone could just run the code on their computer and reference what ever images you have to check if the code runs as it should. I have done a lot of work to figure this out but nothing seems to work. I also run it on in cognitio mode and no help.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    use [code][/code] tags for posting your code

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Canvas Tile Map</title>
    <style>
    .hid{display:none;}
    #canv{border: 1px solid red;}
    </style>
    <script>
    function doc(id){return document.getElementById(id);}
    
    function draw(){
    var canvas=doc('canv'),
        grass=doc('grass'),
    	sand=doc('sand'),
    	context=canvas.getContext('2d'),
    	posX=0,
    	posY=0,
    	mapArray=[
    [0,0,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,0,1,1,1,1,0,0]
    ];
    
    for(var i=0; i < mapArray.length; i++){
    for(var j=0; j < mapArray[i].length; j++){
    context.drawImage(mapArray[i][j]==0?grass:sand,posX,posY,32,32);
    posX+=32;
    }
    posX=0;
    posY+=32;
    }
    }
    
    window.onload=draw;
    </script>
    </head>
    <body>
    <img class="hid" id="grass" src="grass.png" alt="" />
    <img class="hid" id="sand" src="sand.png" alt="" />
    <canvas id="canv" height="400px" width="500px"></canvas>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    Are hidden images loaded ? See for exemple this page or simply this which wait whit an img.onload() (See the last lines of the script).

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    yes, the hidden images loaded (live demo), but who needs canvas for that images map?

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Canvas Tile Map</title>
    <style>
    .hid{display:none;}
    img.draw{position:absolute;}
    #canv{border:1px solid red;width:500px;height:400px;position:relative;}
    </style>
    <script>
    var pix=['grass.png','sand.png'];
    
    function doc(id){return document.getElementById(id);}
    
    function Img(targetID,src,x,y,w,h){
    this.tid=targetID;
    this.src=src;
    this.x=x;
    this.y=y;
    this.w=w;
    this.h=h;
    this.show();
    }
    
    Img.prototype.show=function(){
    if(!doc(this.tid)){
    document.body.appendChild(document.createElement('div')).setAttribute('id',this.tid);
    }
    var img=new Image();
    img.src=this.src;
    img.className='draw';
    img.style.left=this.x+'px';
    img.style.top=this.y+'px';
    img.style.width=this.w+'px';
    img.style.height=this.h+'px';
    doc(this.tid).appendChild(img);
    }
    
    function draw(){
    var posX=0,
    	posY=0,
    	mapArray=[
    [0,0,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,0,1,1,1,1,0,0]
    ];
    
    for(var i=0; i < mapArray.length; i++){
    for(var j=0; j < mapArray[i].length; j++){
    new Img('canv',pix[mapArray[i][j]],posX,posY,32,32);
    posX+=32;
    }
    posX=0;
    posY+=32;
    }
    }
    
    window.onload=draw;
    </script>
    </head>
    <body></body>
    </html>
    works in Opera,FF,Chrome,IE and Safari w/o any headache live demo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Jan 2014
    Posts
    3
    Quote Originally Posted by Padonak View Post
    use [code][/code] tags for posting your code

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Canvas Tile Map</title>
    <style>
    .hid{display:none;}
    #canv{border: 1px solid red;}
    </style>
    <script>
    function doc(id){return document.getElementById(id);}
    
    function draw(){
    var canvas=doc('canv'),
        grass=doc('grass'),
    	sand=doc('sand'),
    	context=canvas.getContext('2d'),
    	posX=0,
    	posY=0,
    	mapArray=[
    [0,0,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,0,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,0,1,1,1,1,0,0]
    ];
    
    for(var i=0; i < mapArray.length; i++){
    for(var j=0; j < mapArray[i].length; j++){
    context.drawImage(mapArray[i][j]==0?grass:sand,posX,posY,32,32);
    posX+=32;
    }
    posX=0;
    posY+=32;
    }
    }
    
    window.onload=draw;
    </script>
    </head>
    <body>
    <img class="hid" id="grass" src="grass.png" alt="" />
    <img class="hid" id="sand" src="sand.png" alt="" />
    <canvas id="canv" height="400px" width="500px"></canvas>
    </body>
    </html>

    Thanks for your help. It is working now. Wanted to do it with canvas since want to add some animations etc. Will just need to study first.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles