8

I'm working on a paint app using canvas, and i want to let the user the option to draw only in a selected area. for that I can use the clip() method. but if I want the user to be able to draw inside letters also - is there any way to use clip() for text? is there another way I can do it?

thanks

Amit Hagin
  • 3,136
  • 6
  • 26
  • 36

1 Answers1

13

You can do this but not using clip. Clip only works with paths and text is not a path.

You will need to use a second in-memory (not on the page) canvas in order to achieve the effect. Here is how:

  1. Make an in-memory canvas, set it to a width and height capable of containing the text
  2. Draw the text to that in-memory canvas
  3. set the in-memory context's globalCompositeOperation to 'source-in'
  4. Draw the thing you want clipped to the text
  5. use drawImage(in-memory-canvas, x, y) to put the newly created effect onto your normal canvas
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • well, it's making some problems. when I draw the "clipped" text with a less than 100% alpha color, I can't draw the same pixels again with a higher alpha % color. – Amit Hagin Sep 08 '11 at 08:14