JavaScript Initial Function Not Drawing on Canvas

Question

Hello stackoverflow community,

I am working on a graphics engine in JavaScript, and currently am trying to repeat an image to use it as a background. Strangely, the initalize() function is not being called, until directly called in the browser console. I before this, I had buttons to move the image which I am now trying to use as the background. Even then, the image would only appear after one of the buttons was pressed. (that old code is commented out). Here is the JavaScript:

var ctx;
var cam_x = 0,cam_y = 0;
//End of Global Variables
function initialize(){
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);//RESETS
    var img=new Image();
    img.src = "brick.png";
    var i;
    var j;
    for(i = 0; i < 10; i++){
      for(j = 0; j < 10; j++){
        drawTile(img, i, j, 0);
      }
    }
    console.log("should be drawing");

    // drawTile(img, 0,0,0);
    // drawTile(img, 1,0,0);
    // drawTile(img, 2,0,0);
    // drawTile(img, 1,1,0);
    // drawTile(img, 2,2,0);
    // console.log("should be drawing");

}

function setTransformations(){
    ctx.translate(-cam_x,-cam_y);
}

function drawTile(img,x,y,z){
    ctx.setTransform(1,0,-1,1,0,z);
    setTransformations();
    ctx.drawImage(img,x*32,y*32);
    ctx.setTransform(1,0,0,1,0,0);
}

function camtranslate(x,y){
    cam_x += x;
    cam_y += y;
    initialize();
}

The commented out drawTile() calls were the to warp the image so it looked oblique (but that's not too relevant). Below is the HTML file:

    <!DOCTYPE html>
<html>
    <head>
        <style>
body {
    background-color: #1ABC9C
}
        </style>
        <script src="main.js"></script>
    </head>

    <body>

      <!--  <button onclick="camtranslate(16,0);"> Right </button>
        <button onclick="camtranslate(-16,0);"> Left</button> <br>
        <button onclick="camtranslate(0,-16);"> Up </button>
        <button onclick="camtranslate(0,16);"> Down </button>
      -->

        <center>
            <h1>Akimbo</h1>
            <canvas id="canvas" height="600" width="600" style="border:1px solid #7F8C8D"></canvas>
        </center>
        <script>camtranslate(16, 0);</script>


    </body>
</html>

The commented out buttons made the image appear on pressing them, but now that I've commented them out, even though I've called the function, it doesn't work. The HTML file should call the initialize() function, but nothing appears in the canvas until I call the function directly in the console. How can I make it so that the background appears immediately upon the page's being loaded?

Thanks

Possible duplicate of [CanvasContext2D drawImage() issue](http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue) — Kaiido, Oct 24 '15 at 15:47
@Griffith I call the `camtranslate()` function, which calls the `initialize()` function. — user5483562, Oct 25 '15 at 16:12
@Kaiido No, I'm not getting any security error like the other post mentioned. It just isn't drawing until it's directly called in the console. — user5483562, Oct 25 '15 at 16:13
the "other post" is not only about the security error, please read it again, and its answer. Your problem, as answered by Blindman67 here and by myself/community in the dupe, is that you don't wait that your image has loaded before trying to draw it. Add the drawing part in the `onload` event of your image. — Kaiido, Oct 25 '15 at 17:58

score 0 · Answer 1 · answered Oct 24 '15 at 15:00

Things take time to load and setting an images src attribute does not mean that the image is available for use.

You need to use the image.onload event to flag that the image has loaded and call the function that uses the image.

function drawTiles(){ // create the function to draw the tiles
    var i;
    var j;
    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){
            drawTile(img, i, j, 0);
        }
    }
}
var img=new Image();  // create image
img.src = "brick.png";  // set the URL and it will start to load it
img.onload = drawTiles;  // the image will call your function when it has loaded

JavaScript Initial Function Not Drawing on Canvas

1 Answers1