Adding an image to an HTML canvas with external Javascript

Question

I am trying to display an image in my canvas. I tried multiples solutions, but the image is never displayed. Adding the image simply through tags in HTML works fine, so I know it isn't an issue with my file path or the image itself...

separate files, HTML file and JS file

<!DOCTYPE html>
<html>
<head>
<title>DrawingSprite</title>
<script src="MovingSquareGame.js"></script>
</head>
<body>
<div id="gameArea">
    <canvas id="myCanvas" width="800" height="480"></canvas>
</body>
</html>


    "use strict";

    var Game = {
        canvas : undefined,
        canvasContext : undefined,
        balloonSprite : undefined
    };

    Game.start = function(){
        Game.canvas = document.getElementById("myCanvas");
        Game.canvasContext = Game.canvas.getContext("2d");
        Game.balloonSprite = new Image();
        Game.balloonSprite.src = 'sm_balloon.png';
        window.setTimeout(Game.mainLoop, 1000);
    };

    document.addEventListener('DOMContentLoaded', Game.start);

    Game.draw = function(){
        Game.canvasContext.fillStyle = "yellow";
        Game.canvasContext.fillRect(Game.rectanglePosition, 100, 80, 50);

         //** I am assuming that this is where the problem is, if I take out this line of code the yellow box outlined above will appear, if this line is in the box will NOT appear**// 

        ~~    Game.drawImage(Game.balloonSprite, {(x : 100, y : 100)});   ~~
    };

    Game.drawImage = function(sprite, position){
        Game.canvasContext.save();
        Game.canvasContext.translate(position.x, position.y);
        Game.canvasContext.drawImage(sprite,  0, 0, sprite.width, sprite.height,
                                              0, 0, sprite.width, sprite.height);
        Game.canvasContext.restore();
    };

    Game.mainLoop = function(){
        Game.draw();
    };

A PNG of a balloon should be displayed on the canvas. Thanks again everyone looking forward to getting this one solved :)

Andre · Accepted Answer · 2019-08-29 06:52:42Z

2

First off,

Your code

Game.drawImage(Game.balloonSprite, {(x : 100, y : 100)});

You should not have parenthesis in your object, it should be:

Game.drawImage(Game.balloonSprite, {x : 100, y : 100));

Then if we run the start method after

Game.start();

We combine these fixes, and we get a working image-draw to canvas: https://jsfiddle.net/0gamu6t2

answered Aug 29, 2019 at 6:52

Andre

7981 gold badge6 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andre Over a year ago

@BrandanDampf Haha thanks, you can mark the answer as the solution by clicking the the arrow under the downvote arrow on the post :)

Mohamed Ghoubali · Accepted Answer · 2019-08-29 09:16:35Z

0

As said by @Bug your code is missed written :

Game.drawImage(Game.balloonSprite, {(x : 100, y : 100)});

Should be :

Game.drawImage(Game.balloonSprite, {x : 100, y : 100});

Then for my part to make it work i have create the img traditionally with an img tag with display none css property.

Then i have to reorder your code ! and call the functions after they get declared. You can take a look to my working solution here :

https://stackblitz.com/edit/js-om2fbq?embed=1&file=index.js

answered Aug 29, 2019 at 9:16

Mohamed Ghoubali

212 bronze badges

Collectives™ on Stack Overflow

Adding an image to an HTML canvas with external Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related