CODEWITHSUNDEEP
javascriptimagehtml5-canvas
Joseph Clark
Joseph Clark

Reputation: 37

Best way to get new Image in Javascript using canvas

I am making a game with the html5 canvas and I am having some trouble getting the images on screen.

//player img
var img1 = new Image();
    img1.onload = function() {
      console.log("image loaded");
    };
    img1.src = "player.png";

The image is a .png file called "player" and is saved on my desktop. Am I doing something wrong when setting the src method? Is there a better way to do this? I appreciate any help.

Upvotes: 0

Views: 1159

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65808

Well first, the image should have a path that is relative to the html document and if you are not seeing the image, it's probably because you didn't put that relative path into your code (you are only using the file name which implies the image is in the same directory as the html file).

Also, you haven't shown any code to associate the image with the canvas. This is the approach:

    // Get the DOM object reference for the canvas element:
    var canvas = document.getElementById("canvas");

    // Get an object reference for the canvas' contextual environment:
    var ctx = canvas.getContext('2d');

    // Instantiate an image to use as the background of the canvas:
    var img = new Image();

    // Make sure the image is loaded first otherwise nothing will draw.
    img.addEventListener("load", function () {
      // Draw the image on the canvas at position 0, 0 (top-left):
      ctx.drawImage(img, 0, 0);
    });

    // Wait until after wiring up the load event handler to set the image source
    // This example assumes that the image is located in a sub-folder of the current folder, called images.
    // Your path must be a relative reference to the location where the image is.
    img.src = "images/starfield.jpg";

Upvotes: 1

Related Questions