force html canvas to draw only on a certain area for some drawings

Question

My objective is this : creating a rolling text that does not cross borders of a rectangle inside the canvas. Some text should appear partially. Yet i have not found a way to obtain this.

The only thing i can think is of some setting of the canvas like rotate, and translate that show the drawings only in the limited area, as long as i don't reset the state of the canvas.

I uploaded an example of what the behaviour should be where the text is rolling from right to left (note the 'g' is cut as desired) :

!!! Sorry , the admin don't let me to upload images yet , see this at http://jsdefense.sourceforge.net/rpsz/ex_rolling_text.jpg

Another solution could be to print text over a brand new Image and slice it when drawing ?

Answer 1

You want to use clipping on the canvas. MDC has an example.