Overlay HTML5 canvas over image

Question

I want to have an image which is uploaded from my database and on top of it the exact same size in the same position is a HTML5 canvas.

Most of the solutions I have found I have been using JQuery/JavaScript, however I want a similar solution if possible just using CSS3 as the images are being outputted from a database and there can be more than one image on the page and each image will have a canvas.

How can I achieve this?

score 26 · Accepted Answer · answered Feb 12 '13 at 23:37

Yes.

You can do this entirely in CSS, but you will have to add some specific HTML plumbing for each image.

If you ever get tired of the extra plumbing, javascript could do most of the plumbing for you.

Here is a Fiddle of the CSS-only version:

http://jsfiddle.net/m1erickson/g3sTL/

The HTML:

<div class="outsideWrapper">
    <div class="insideWrapper">
        <img src="house-icon.jpg" class="coveredImage">
        <canvas class="coveringCanvas"></canvas>
    </div>
</div>

Of course, in your version, you would replace the image src with your dynamic database call to fetch the image.

The CSS:

.outsideWrapper{ 
    width:256px; height:256px; 
    margin:20px 60px; 
    border:1px solid blue;}
.insideWrapper{ 
    width:100%; height:100%; 
    position:relative;}
.coveredImage{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px;
}
.coveringCanvas{ 
    width:100%; height:100%; 
    position:absolute; top:0px; left:0px;
    background-color: rgba(255,0,0,.1);
}

Is there a way to make this work for a list of images without knowing the image sizes in advance? Removing the width/height from the outer wrapper makes all images and canvases in all these double div wrappers render in one spot. — TheAtomicOption, Sep 20 '17 at 23:13
Figured it out. I'm using Flask so python can read the image dimensions and Jinja can set an inline style for the outsideWrapper divs equal to the dimensions. — TheAtomicOption, Sep 21 '17 at 20:02
Important side note: the css width and height are not the same as ` — yeya, Oct 17 '18 at 09:27

score 3 · Answer 2 · edited May 23 '17 at 12:02

Possible duplicate.

Depending on how many images are in the database, you could have a separate canvas id for each with the name of the image file (e.g. canvas #foo { background:url(foo.jpg) }). I would load this in a separate stylesheet. :)

It would probably be easier to maintain a Javascript solution though if your database is dynamic. A few lines of javascript would be sufficient, instead of constantly updating a stylesheet with new names. Less ~~error~~ typo prone as well.

Overlay HTML5 canvas over image

2 Answers2