0

I want to draw Interactive text area on canvas .Normaly , using id and classes we can change div css property but with canvas how can i achieve same functionality .

i want to write text on top of canvas which should change on change event of some text area.i wish to use menu bar to achieve functionality like change font-color,font-size,font-family etc .

with div id and class i can change css but on canvas how can i achieve this?? please suggest ?enter image description here

anam
  • 3,905
  • 16
  • 45
  • 85
  • 1
    I think your question is a duplicate of others like http://stackoverflow.com/questions/15823328/html5-edit-text-on-the-canvas – ılǝ Aug 27 '13 at 04:46
  • @PrasannaAarthi inside canvas? – anam Aug 27 '13 at 04:48
  • the text inside canvas is a picture, you can't edit it. did you research before asking the question? or maybe I don't understand what you are asking. – ılǝ Aug 27 '13 at 04:49
  • @ile The onscreen end result of any text editor is a picture on a display - there just a bunch of code keeping track of characters, cursor position, font size etc and drawing the results. No reason why you can't do that with canvas. – dc5 Aug 27 '13 at 04:57
  • @dc5 of course you could manipulate the pixels of the drawn text, what I mean is you can't access the text directly as an object. This seemed to be what the question was about. – ılǝ Aug 27 '13 at 04:59
  • Have a look at this – Prasanna Aarthi Aug 27 '13 at 04:59
  • @PrasannaAarthi that is erasing and redrawing, not editing the existing one – ılǝ Aug 27 '13 at 05:01
  • @ile - I see what you are saying. I'm not entirely sure what the OP is after either. – dc5 Aug 27 '13 at 05:07

1 Answers1

0

You control text XY position in the same command that draws text: context.fillText("test",20,25);

You control font size and font family like this: context.font="14pt Verdana".

You control text color using the fill like this: context.fillStyle="gold".

You control opacity like this: context.globalAlpha=.80. (0.00=invisible, 1.00=fully opaque).

You control text rotation using a transform like this:

context.save();
context.rotate(30*Math.PI/180);
context.fillText("Test",20,20);
context.restore();

You would have to control these using your own custom coding (some easy, some moderate):

  • Line spacing,
  • Character spacing,
  • Text Alignment,
  • Underlining,
  • Text on path (curved text)
  • Right to left orientation

There is no capability to italicize (unless the font has italicized characters).

markE
  • 102,905
  • 11
  • 164
  • 176