1

I am working on an application where the UI is going to be web based. The target browser is Internet Explorer ONLY

I am wondering, for the UI, at which point does it become beneficial to use Canvas and draw all your elements yourself rather than using standard HTML elements?

Or is the case that you should ONLY use canvas if there is something that you can't do with HTML elements?

Ideally, I am looking for a link to a discussion or an answer and some examples explaining why. If it is just down to what you prefer, then say, but otherwise are there any considerations?

Thanks.

Cheetah
  • 13,785
  • 31
  • 106
  • 190

2 Answers2

2

Please read my answer to "Does it make sense to create canvas-based UI components?".

In short, it's a bad idea.

The Canvas spec itself gives a laundry list of reasons why it is bad to make UI controls in canvas. Accessibility is a nightmare. To quote the spec:

Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:

  • Mouse placement of the caret has to be reimplemented.
  • Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).
  • Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).
  • Native features such as copy-and-paste have to be reimplemented.
  • Native features such as spell-checking have to be reimplemented.
  • Native features such as drag-and-drop have to be reimplemented.
  • Native features such as page-wide text search have to be reimplemented.
  • Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.
  • Bidirectional text editing has to be reimplemented.
  • For multiline text editing, line wrapping has to be implemented for all relevant languages.
  • Text selection has to be reimplemented.
  • Dragging of bidirectional text selections has to be reimplemented.
  • Platform-native keyboard shortcuts have to be reimplemented.
  • Platform-native input method editors (IMEs) have to be reimplemented.
  • Undo and redo functionality has to be reimplemented.
  • Accessibility features such as magnification following the caret or selection have to be reimplemented.
Community
  • 1
  • 1
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • 1
    Nice answer. Maybe worth pointing out that in extreme cases it could be useful (e.g. bespin/skywriter/ace, google docs). Taking a look at the ace codebase gives a good idea of what's really involved... – Dagg Nabbit May 19 '12 at 20:18
  • Remember that when mozilla merged with Ace it gave up all use of Canvas because it turned out being too hard. The Skywriter code is really good though and definitely worth taking a look at if you need to do text based stuff in a Canvas – Simon Sarris May 19 '12 at 20:22
  • 1
    Hmm, I looked at the code back when it was skywriter, and used it in a project as ace, but didn't look at the code again. I just assumed it was still using canvas, thanks for pointing that out. – Dagg Nabbit May 19 '12 at 20:23
0

is the case that you should ONLY use canvas if there is something that you can't do with HTML elements?

Yes, pretty much. Canvas is for drawing - 2D right now and 3D in the future.

I don't expect that browser native controls would ever be faster to draw on canvas, by the way. You are adding at least one layer of code above an existing implementation.

Oded
  • 489,969
  • 99
  • 883
  • 1,009
  • It's suppose it's possible that a GPU-accelerated canvas could draw faster than software-rendered native controls... – Dagg Nabbit May 19 '12 at 20:15
  • @GGG - But the amount of work needed to make the widgets responsive, native looking etc... And there is an implicit assumption that the native controls are not rendered via GPU acceleration. – Oded May 19 '12 at 20:17
  • Agreed, I was just splitting hairs ;) – Dagg Nabbit May 19 '12 at 20:19