Home/ Questions/Q 8063437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T11:02:07+00:00

I am drawing image which is loaded using loader method in two different places.

  • 0

I am drawing image which is loaded using loader method in two different places. But it only displays the second one. (I am following this http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/)

If I add an alert() it works in Fx but not in Chrome. I want it to work everywhere without alert()

If I try drawing Image without using preloaded image I am getting the desired result. But I am thinking it is extra load (http://www.html5canvastutorials.com/tutorials/html5-canvas-images/)

ImageOnload(“O”,120,120); //This image not displaying

alert(“If i add alert it works only in Fx but not in Chrome”)

ImageOnload(“O”,120,20);//only this is displaying ???

<html>
    <head>
    </head>
    <script type="text/javascript" >
        var ctx;
        var ImageVariable={};

        window.onload= function()
        {
            var canvas = document.getElementById("gameLoop");   
            ctx = canvas.getContext("2d");

            ImageBuilder(ImageSourceDB);
            ImageOnload("O",120,120); //This image is not displaying
                    //alert("If i add alert it works only in FFox but not in chrome")
            ImageOnload("O",120,20);  
        }

        var ImageSourceDB=
        {
            X:"./Images/X.gif",
            O:"./Images/O.gif"
        }
        function ImageBuilder(ImageSrcDB)
        {
            for (iSrc in ImageSrcDB)
            {
                ImageVariable[iSrc]= new Image();   
                    ImageVariable[iSrc].src = ImageSrcDB[iSrc];
            }
        }

        function ImageOnload(ImageSrc,x,y)
        {
            ImageVariable[ImageSrc].onload= function ()
            {
                ctx.drawImage(ImageVariable[ImageSrc],x,y);
            };          
                    ImageVariable[ImageSrc].src = ImageSourceDB[ImageSrc];
        }
    </script>
    <body>
        <canvas class ="pattern" id="gameLoop" height="300"  width="300" />
    </body>
</html>

List item

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    ImageOnload("O",120,120); //This image not displaying
ImageOnload("O",120,20);//only this is displaying ???

    You forgot to change the id of the object:

    ImageOnload("O",120,120);
ImageOnload("X",120,20); // Use "X", not "O"!!!

    If you still want to show “O” twice, then you should draw it twice, but with only one onload function. See example below:

    <script type="text/javascript" >
    var ctx;
    var ImageVariable={};
    var ImageSourceDB = {
        X:"./Images/X.gif",
        O:"./Images/O.gif"
    }

    window.onload = function() {
        var canvas = document.getElementById("gameLoop");   
        ctx = canvas.getContext("2d");

        ImageBuilder(ImageSourceDB);

        ImageVariable["O"].onload = function() {
            // this will be executed when the image "O" is loaded
            // this is a pointer to ImageVariable["O"]
            ctx.drawImage(this, 120, 120);
            ctx.drawImage(this, 120, 20);
        }
        ImageVariable["X"].onload = function() {
            // this will be executed when the image "X" is loaded
            ctx.drawImage(this, 30,  30);
        }
    }        
    function ImageBuilder(ImageSrcDB) {
        for (iSrc in ImageSrcDB) {
            ImageVariable[iSrc]= new Image();   
            ImageVariable[iSrc].src = ImageSrcDB[iSrc];
        }
    }
</script>
    • 0