CODEWITHSUNDEEP
javascriptjqueryfunctioncanvasdrawimage
SamOceans
SamOceans

Reputation: 15

JQuery canvas drawImage() not working

I've tried everything I can think of and I'm reaching my wit's end.

"tilesheet.png" should be drawn onto the canvas but nothing I try seems to work. Occasionally, when I try some new method I found online, it will appear to work fine once, but if I refresh the page it stops again.

Here is the code I'm using:

<head>
    <title>Test Code</title>
    <script src='scripts/jquery.js'></script>
</head>
<body>
    <img id='img' src='images/tilesheet.png' style='position:absolute; visibility:hidden;'/>

    <div id="port"></div>

    <script>
        viewHeight = 10;
        viewWidth = 10;

        $("#port").append("<canvas id='mapview' width='"+(viewWidth*32)+"' height='"+(viewHeight*32)+"' style='border:1px solid black;'>Your browser doesn't support the canvas element.</canvas>");

        var worldMap = new gameMap(viewHeight,viewWidth);

        worldMap.redraw();


        // These functions define a gameMap "CLASS" //
        function gameMap (height,width){

            this.tileSheet = $("#img");
            this.canvas = $("#mapview");
            this.ctx = this.canvas.getContext("2d");//<-- Error is referring to this line

        }

        //Draw Function
        gameMap.prototype.redraw = function(){

            this.tileSheet.onload = function(){
                this.ctx.drawImage(this.tileSheet,10,10);
            }
            this.tileSheet.src = "apps/gamejournal/images/tilesheet.png";

            for(i = this.viewY; i < this.viewY+this.viewHeight; i++){
                for(j = this.viewX; j < this.viewX+this.viewWidth; j++){

                }
            }

            this.mapcss();
        };

        //CSS
        gameMap.prototype.mapcss = function(){
            var h = this.viewHeight*this.tileSize;
            var w = this.viewHeight*this.tileSize;

            $('#port').css({
                "height":h,
                "width":w,
                "position":"relative",
                "margin":"0 auto"
            });
        };
    </script>
</body>

Update 10/30/15 - After using Google Chrome's "Inspect Element" feature, I've noticed that an error is being reported: TypeError: this.canvas.getContext is not a function (test.php:26)
Does anyone know what might be causing this?

Update 11/4/15 - I've created a JSFiddle so you can see what my code is doing. https://jsfiddle.net/6ss8ygLd/3/

Any help would be greatly appreciated. Thanks!

Upvotes: 0

Views: 3234

Answers (1)

SamOceans
SamOceans

Reputation: 15

Okay, after a lot of extra research I seem to have found the solution to my own problem.

The problems proved to be a mix of using jquery in places where it wouldn't work, and putting my "onload" function in the wrong place.

Here is the final code I used:

<head>
    <title>Test Code</title>
    <script src='scripts/jquery.js'></script>
</head>
<body>
    <img id="tiles" src="images/tilesheet.png"  style="position:absolute; left:-9999px;"/>

    <div id="port"></div>

    <script>
        viewHeight = 10;
        viewWidth = 10;
        var mapw = viewWidth*32;
        var maph = viewHeight*32;

        $("#port").append("<canvas id='mapview' width='"+mapw+"' height='"+maph+"' style='border:1px solid black;'>Your browser doesn't support the canvas element.</canvas>");

        // These functions define a gameMap "CLASS" //
        function gameMap (height,width){

            this.canvas = document.getElementById("mapview");
            this.ctx = this.canvas.getContext("2d");
            this.tileSheet = document.getElementById("tiles");

        }

        //Draw Function
        gameMap.prototype.redraw = function(){

            this.ctx.drawImage(this.tileSheet,0,0);

        };


        //Call Functions
        document.getElementById("tiles").onload = function(){
            var worldMap = new gameMap(viewHeight,viewWidth);

            worldMap.redraw();
        }
    </script>
</body>

Upvotes: 1

Related Questions