0

I'm trying to decide how to implement curved text.

There are two ways it seems.

CSS transformations and Canvas.

I was under the impression that canvas is used for graphics b.c. it runs in immediate mode as shown in this html5 article.

So, I plan on using CSS3 transformations as shown in this SO post.

I just wanted to confirm or not confirm the primary purpose of canvas - that it is for efficient graphics.

Community
  • 1
  • 1
  • 2
    Added in HTML5, the HTML element is an element which can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing or rendering. (https://developer.mozilla.org/en-US/docs/HTML/Canvas) – j08691 Jun 03 '13 at 15:14
  • 1
    I can draw static graphics in a graphics editor and save as an image. This is more efficient then running JavaScript and canvas for non-dynamic, static images. The primary purpose, might be for dynamically created images or animations/games. –  Jun 03 '13 at 15:16
  • You asked what it was for and I showed you the MDN definition. There's more than one way to skin a cat. – j08691 Jun 03 '13 at 15:18
  • 2
    Consider also accessibility and search engines: is the curved text more important as a *graphical component* or as *actual text*? – apsillers Jun 03 '13 at 15:19
  • 1
    @pure_code.com that's exactly it. for static stuff it makes no sense at all. But when you have stuff that is interactive then the canvas is a possibility to go. – Sven Bieder Jun 03 '13 at 15:19

2 Answers2

3

Yes, you're correct - <canvas> is for graphics. It works just like an <img>, only that you can dynamically draw on it with a scripting language. Think in terms of accessibility - would you rather use (fancy) css or photoshop-generated images for cool effects on text?

Your decision not to use if for text is fine. With CSS transformations, you still will be able to select text, or manipulate it easily through the DOM instead of needing to redraw the picture.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • If you mean [this answer](http://stackoverflow.com/a/2841158/1048572), it still needs single elements for the single characters and is not really css-only. The [SVG solution](http://stackoverflow.com/a/4706435/1048572) would look nicer :-) – Bergi Jun 03 '13 at 15:24
1

Though it all depends on the actual text transform you are trying to implement, I would try to avoid using Canvas for text for 2 reasons:

  1. SEO is better if you are using standard text and divs
  2. Accessibility will not be as good if you render your text as canvas

Canvas is basically a bitmap surface you can draw onto many things, including text. I personally find it best suited for graphics and interactive games. Even if basic CSS transforms do not get the effect you want, I would try using Javascript code manipulating because even if javascript is disabled or there is no canvas support, you still have text.

Youn Elan
  • 2,379
  • 3
  • 23
  • 32