CODEWITHSUNDEEP
javascriptimagedomhtml5-canvas
NTMN
NTMN

Reputation: 33

ERROR: Image is not defined (trouble using Image() function)

I use a very simple piece of code (but then obviously with my image instead of Image.png). I am trying to give my canvas a background image.

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

var img = new Image();
img.onload=start;
img.src="Image.png";
function start(){
ctx.drawImage(img,0,0);
}

But I receive this error: ERROR: 'Image' is not defined. [no-undef] about the part:

var img = new Image().

I tried to replace this with

var img = document.createElement("img");

Then the error is gone, but nothing displays, no image whatsoever, its just empty. Has anybody any idea what I am doing wrong? Thanks in advance!

FULL CODE

var document;
var ctx;
var window;

window.onload = function () {
   start();
}

function start(){

  var canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");


  var img = document.createElement("img");
  img.src="image.png";
  img.onload=start;

  function start(){
    ctx.drawImage(img,0,0,400,400);
  }
}

Upvotes: 3

Views: 26876

Answers (2)

MST
MST

Reputation: 689

You need to attach the image you have created to the DOM.

document.getElementById("image-container").appendChild(img);

Edit: I apologize, I see you are drawing it to a canvas object. In that case I would suspect that your image is failing to load properly.

A couple ideas: you could add some debugging output within the start() function or set a breakpoint, then look at what the 'img' contains at that point in time. Or you could check the status code on the 'Network' tab of the devtools console. Or you could replace the image with one that is known to work, such as www.google.com/images/logo.png. This all should hepl you narrow down the issue.

Note: window is a global variable so you shouldn't declare it, and names that are properties of window such as window.document are also globals - can be referenced as document without declaring it. Occasionally JS frameworks complain, but there are framework-specific ways to solve this. Duplicate declaration of these variables is not a good path to go down.

If you're adding these in response to ESlint errors, you should add eslintrc.json to your project root (if you don't have it already), and give it the following property so it doesn't complain for browser globals:

{
  "env": {
    "browser": true
  }                                                                      
}

As to why Image is not defined, this would not happen on a modern browser environment. It has to be something with your environment setup. Is there any information you could provide about how you are running this code?

Upvotes: 1

jcarpenter2
jcarpenter2

Reputation: 5468

Try setting the onload callback before you set the image's src.

var img = document.createElement("img");
img.onload=start;
img.src="image.png";

If the image is cached, then onload would be fired as soon as src is set, i.e. before it is assigned to start see this question.

Upvotes: 0

Related Questions