We have an image now, but we are still missing the top text and bottom text. Here are a few things we need as the text property:
- The font size should be responsive to the size of the image
- The text should be center-aligned
- The text should have margin space at the top and bottom of the image
- The text should have a black stroke so that it can be seen clearly over the image
For our first step, we need the font size to be responsive. If the user selects either a large image or a small one, we need to have a relative font size. Since we have the canvas height and width, we can use that to get a font size that is 4% of the average of the image height and width. We can center align the text using the textAlign property. ...