O'Reilly logo

JavaScript by Example by Dani Akash S

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Rendering text on the canvas

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required