How can I remove a duplicate image without display:none?

Question

I am making a layered image of sorts for the header on a website. This is going to have individual components that animate in various simple ways, and some require blending modes, so I will obviously have to use HTML5 Canvas.

I did some research on how to insert an image, and I found this:

$(document).ready(function(){
var canvas = document.getElementById("myCanvasName");
var ctx = canvas.getContext("2d");
var image = document.getElementById("myImageToInsert");
canvas.height = image.offsetHeight;
canvas.width = image.offsetWidth; //to set the canvas's dimensions, to allow for a responsive design
ctx.drawImage(base,0,0);
});

Pretty simple, I grab the HTML <img> tag, and include it in the canvas. The problem is that now I have two images in my markup: the canvas and the <img> tag the canvas is drawing from. This is obviously undesirable.

If I try to set display:none on the <img> it affects the canvas element as well (and causes it to not display the image).

My question: How can I either import an image into Canvas without using markup, or how can I hide the source image?

Here's a fiddle, you can see that there are two images (one canvas) and display none will affect both of them. (Even when it's only called on the image tag): http://jsfiddle.net/9z9x1gb7/

@Harry Fiddle has been created: http://jsfiddle.net/9z9x1gb7/ — Aaa, Aug 23 '14 at 20:24

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

The actual problem you have is that the image with display:none has zero height and width. If you set your canvas to fixed dimensions (e.g. 500 x 500), you will see the image. As for how to get the width and height of the image without displaying it, you might want to take a look at the following:

jQuery - Get Width of Element when Not Visible (Display: None)

How to get the height of a hidden image?

Preloading images with jQuery

edited May 23 '17 at 12:05

Community

1
1

answered Aug 23 '14 at 20:39

arghbleargh

3,090
21
13

Interesting! I will check this out and get back to you. Thank you! – Aaa Aug 23 '14 at 20:45

score 1 · Answer 2 · answered Aug 23 '14 at 20:50

You need to make sure your image is actually loaded before drawing it. `$(document).ready(...) never waits for those other resources to load.
You need to get the dimensions of the image accurately. If you base it off of something that's already in the DOM tree, well, it's likely doable, but given all the styling constraints, etc... good luck with that! I've always just created a new image whenever I wanted some image drawn to canvas without any external libraries.

See below:

$(document).ready(function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var duckOrg = document.getElementById("duckImg");
    var duck = new Image();
    duck.onload = function() {
        canvas.height = duck.height;
        canvas.width = duck.width; //to set the canvas's dimensions, to allow for a responsive design
        //alert(duckOrg.src);
        ctx.drawImage(duck, 0, 0);
    }
    duck.src = duckOrg.src;
});

score 0 · Accepted Answer · answered Aug 23 '14 at 20:45

you can try this way:

$(document).ready(function () {

    var canvas = document.getElementById("myCanvas"),
        ctx = canvas.getContext("2d"),
        duck = new Image(),
        updateCanvas = function () {
            canvas.height = duck.height;
            canvas.width = duck.width; //to set the canvas's dimensions, to allow for a responsive design
            ctx.drawImage(duck, 0, 0);
        };

    duck.onload = updateCanvas;
    duck.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Anas_platyrhynchos_male_female_quadrat.jpg/640px-Anas_platyrhynchos_male_female_quadrat.jpg";

});

And in the HTML:

<canvas id="myCanvas"></canvas>

Hope this helps!

Ooh, I didn't know about that constructor! I like that. Let me mess with it a bit. — Aaa, Aug 23 '14 at 20:49
Works perfectly, thanks! Now to figure out how to add blending modes... *goes back to google* — Aaa, Aug 23 '14 at 21:25

score 0 · Answer 4 · answered Aug 23 '14 at 20:48

You should be able to do the below in JS, with just the canvas in the HTML markup:

$(document).ready(function(){
    var myImg = new Image;
    myImg.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Anas_platyrhynchos_male_female_quadrat.jpg/640px-Anas_platyrhynchos_male_female_quadrat.jpg";
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    canvas.height = myImg.naturalHeight;
    canvas.width = myImg.naturalWidth;
    ctx.drawImage(myImg,0,0);
});

http://jsfiddle.net/9z9x1gb7/1/

How can I remove a duplicate image without display:none?

4 Answers4