Right now, I'm using

var lifeIcon = new Image();
lifeIcon.src = "img/System/lifeIcon.png";

Is there a way to do the same thing in 1 line?

I tried

var lifeIcon = (new Image()).src = "img/System/lifeIcon.png";

But it doesn't work. lifeIcon is considered as a string...

Thanks.

Note: I have many, many images. My goal is to use the Image in a canvas. Ex: ctx.drawImage(lifeIcon,0,0)

Solution:

function newImage(src){
    var tmp = new Image();
    tmp.src = src;
    return tmp
}

var lifeIcon = newImage("img/System/lifeIcon.png");
var closeIcon = newImage("img/System/closeIcon.png");
var goldIcon = newImage("img/System/goldIcon.png");
...

Note: I personally find it faster to write and faster to read that way, especially because I have many images.

Right now, I'm using

var lifeIcon = new Image();
lifeIcon.src = "img/System/lifeIcon.png";

Is there a way to do the same thing in 1 line?

I tried

var lifeIcon = (new Image()).src = "img/System/lifeIcon.png";

But it doesn't work. lifeIcon is considered as a string...

Thanks.

Note: I have many, many images. My goal is to use the Image in a canvas. Ex: ctx.drawImage(lifeIcon,0,0)

Solution:

function newImage(src){
    var tmp = new Image();
    tmp.src = src;
    return tmp
}

var lifeIcon = newImage("img/System/lifeIcon.png");
var closeIcon = newImage("img/System/closeIcon.png");
var goldIcon = newImage("img/System/goldIcon.png");
...

Note: I personally find it faster to write and faster to read that way, especially because I have many images.

• javascript

• Is the class Image under your control? Could you add or change the constructor? – Confusion Commented Aug 31, 2013 at 21:21
• 2 ...why? That would be terrible for readability – tckmn Commented Aug 31, 2013 at 21:22
• @Confusion It's a built-in class for the HTML <img> element – tckmn Commented Aug 31, 2013 at 21:22

3 Answers 3

It sort of depends on what you're doing next. If the only other thing you need is to append it, then you can do this:

element.appendChild(new Image()).src = "img/System/lifeIcon.png";

This works because .appendChild() returns the newly appended element.

If you need to assign other properties, then you may simply want to create a helper function that lets you pass an object holding the properties and values.

function create(name, props) {
    var elem = document.createElement(name);
    for (var p in props)
        elem[p] = props[p];
    return elem;
}

This is a very simple function, and could be expanded a bit, but you get the idea.

var el = create("img", {src: "img/System/lifeIcon.png"});

Well, not with the var. You could do this if it was a global:

(lifeIcon = new Image()).src = "img/System/lifeIcon.png"; // WARNING: VERY BAD

Obviously, this is a bad idea, since you always want to keep the globals to a minimum.

Actually, the whole idea of assigning the src on one line is a bad idea anyway, since it would make your code much harder to read. Remember, you're going to spend more time reading your code than writing it, so use the two-line form. Your future self will thank you.

Its difficult to do without modifying the Image function or making an external function like so.

function img(src) {
  var img = new Image(); img.src = src;
  var canvas = document.createElement("canvas");
  var returning = img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext("2d").drawImage(img, 0, 0);
    return canvas;
  }();
  return returning;
}

This will give you a canvas ready for you to draw it on another canvas.

ctx.drawImage(img("background.jpg"), 0, 0);

OR Just

var image = img("background.jpg"); #will give you a canvas

What else you could try for one_lining is the following

var image = function() { var img = new Image(); img.src = "background.jpg"; return img; }();

One lining in my opinion is only perfect if you call it 1 or 2 times, but if you heavily use this then simply making a function will do better.

Good luck ^^