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 ?
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.
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)
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 ?
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.
I would definitely think about what @DanCouper posted. If you’re trying to make a PWA, then accessibility is important.
Haha, sorry, I fat fingered the typing, that should have been “doing” not “so Ng”
And yes, just overlaying text is easier, and also HTML has rich support for citations. So for example:
<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>