Using Canvas overlay text on images

1

Dear All,

I am looking to use the canvas tags to overlay text on an image in a popup box for a mobile app.

Does the canvas tag work well on most modern mobile browsers ? Sorry for the newbie question, but I just discovered this feature.

Can the overlayed text be an html link ?

Best regards,

Stuart

2

I have found this post that should give you instructions on how to use fillText() and JavaScript to get the text to work. I hope this is what you’re looking for.

I’ve never done mobile development, but when I’m looking to put text onto an image I use the position option in css. Not sure if that applies here. I would love to know if you can still use HTML within a mobile app.

3

Yeah, it’s an old API now, 15 years or so, it’s supported everywhere.

Is there a special reason why you’re not just using text though? Canvas will work fine, it’s just a much more complicated way of so Ng things (and inaccessible – you’re effectively rendering a picture of some text instead of actual text)

4

Hi Dan,

What does Ng mean ?

On our app https://europeanwaterproject.org/ we have popups when people click on individual fountain or cafés showing images from flickr, mapillary, and wikimedia commons. You can see a lot of images around the lake in Zurich. I want to overlay an author attribution text over the image.

Do you suggest just using text positioned within the popup over the image ?

Thanks,

Stuart

5

Dear Caleb-Mabry,

I found this code, which I think will do the trick for us : http://jsfiddle.net/wAY6Y/

I will try the position option. If that works, I think it is the way to go.

Our app is a progressive web application with a manifest.json for caching. The benefit is cross platform code outside of the web stores.

Thanks,

Stuart

6

I would definitely think about what @DanCouper posted. If you’re trying to make a PWA, then accessibility is important.

7

Haha, sorry, I fat fingered the typing, that should have been “doing” not “so Ng” :confused:

And yes, just overlaying text is easier, and also HTML has rich support for citations. So for example:

<figure class="popup-image">
  <img
    class="popup-image__img"
    src="https://examplepedia.com/example.jpg"
  />
  <figcaption>
    <p>A lovely picture of Zürichsee, from <cite><a href="https://examplepedia.com/example.jpg">Examplepedia</a></cite>, taken by <span rel="author">Edna Example</span></p>
  </figcaption>
</figure>