Your 'question' is a little wide, but I will try to help you out a little bit:
Google Docs is using a hidden iframe (not display:none, is just that the user can't actually see it) with a body with content editable (.docs-texteventtarget-iframe); when you see the caret blinking it means that the editable body is focused and everything you write there gets inserted in the DOM (after sanitizing special HTML characters)
Google Docs, like I said, is using DOM modification (not canvas or svg); even the caret is a little div blinking.
TinyMCE uses a similar technique but with an input field (instead of a content-editable body)
