-1

To make a long story short, I need to use JavaScript to add an image to an html5 game given the URL. The catch is that it is inside a program called gamemaker html5, which is basically a drag and drop IDE for creating HTML games.

I don't know any JavaScript, and simply need is code to add an image given the URL. Can someone please translate the following html into JavaScript for me?

<img src="http://www.mydomain.com/myimagefile.gif"></img>

This is all contained on an html5 canvas, so I need to be able to pop the image onto x,y coordinates.

STONEYFTW
  • 23
  • 1
  • 5
  • A related post about drawing an image on a canvas: http://stackoverflow.com/questions/6011378/basic-canvas-question-how-to-add-image-to-canvas – jfriend00 May 02 '12 at 18:53

2 Answers2

0

EDIT: Now that you've specified you want to draw this image on a canvas, it's an entirely different question. See this MDN tutorial on images and canvas for sample code. Also, see this other relevant SO question.

Previous answer before the question became about canvas.

This will append a new image with that URL to the body. Since you probably want to put it somewhere more specific than that, you will need to also tell us where you want the image inserted in your page so the document.body part can be replaced with the desired element in your page that you want the new image to be located near.

var img = new Image();
img.src = "http://www.mydomain.com/myimagefile.gif";
document.body.appendChild(img);

This inserts the image as the last child of a given node. You can also insert a node before or after a given object in the page with slightly different code.

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Thanks for the quick reply. Is there a way to slam it right down on x,y coordinates? Everything in the app is contained on an html5 canvas. – STONEYFTW May 02 '12 at 18:48
  • 1
    @STONEYFTW - OH, so now you mention that you want to put it in a canvas. You SHOULD have mentioned that in your question. In fact, if you want others to help you, I'd suggest you edit your question to include that fact. – jfriend00 May 02 '12 at 18:49
  • @STONEYFTW - I added some info to my answer about drawing an image on canvas. – jfriend00 May 02 '12 at 18:56
  • @jfriend00 Technically the OP did mention it in their question, since they specifically said it was for GameMaker:HTML5, which uses a canvas to draw things. – Niet the Dark Absol May 02 '12 at 19:45
  • @Kolink - Less than 1% of people reading the question would know how GameMaker works and know that it uses canvas. A good question would allow everyone who knows how canvas works to potentially provide an answer to the question and would have made it a question about inserting an image in canvas, not about GameMaker. And, as you can see the first few answers were useless because this information was left out of the question. – jfriend00 May 02 '12 at 19:55
0

To add an image to a GameMaker:HTML5 game, use this:

newimg = sprite_add("http://www.mydomain.com/myimagefile.gif",1,false,false,0,0);

Replace the arguments as necessary, but be aware that this does not support animated GIF files - they must be a strip if you want to import an animated sprite.

newimg can then be used anywhere you would normally name a sprite, such as:

draw_sprite(newimg,-1,32,32);
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • This is exactly what I need. Thanks mate. I wasn't aware that sprite_add could take in a URL. Thanks I'll give it a try. – STONEYFTW May 02 '12 at 18:56