3

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);
  }
}
jcarpenter2
  • 5,312
  • 4
  • 22
  • 49
NTMN
  • 33
  • 1
  • 1
  • 5

2 Answers2

1

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?

MST
  • 649
  • 6
  • 4
  • I use brackets to test my code, and my browser in chrome. When I do not declare window, brackets gives an ESLint error that window is undefined.. – NTMN Dec 29 '17 at 22:27
  • Gotcha. I suspected it could have been ESlint :) In that case, you will want to configure ESlint to set browser globals. If you add `eslintrc.json` to your project root, and then give it the following text: { "env": { "browser": true, } } That should fix those lint errors. (Note I'll edit my answer to add this code, I think this'll show up as squashed). – MST Dec 29 '17 at 22:30
  • Ah you know what? This should teach ESlint about `Image` and fix your other error! (I've never heard of brackets, and I'm surprised that their default setup would not take care of this). – MST Dec 29 '17 at 22:36
  • Pretty sure thats indeed the problem! Thank you very much! :) – NTMN Dec 29 '17 at 23:49
  • Did you see my answer? It'll also play into the functioning of your code. – jcarpenter2 Dec 30 '17 at 01:27
0

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.

jcarpenter2
  • 5,312
  • 4
  • 22
  • 49