HTML5+CSS on Canvas 3D WebGL (TM) Library

paint Library Method

Short Description: Paint HTML element on texture canvas

Signature: t.paint ([canvas],[ignorehide])
Group: Texture
Class: transition Class

Paints the HTML element associated with the transition to the specified Texture Canvas. canvas may be 1 or 2; default is the one selected with texCan. ignorehide will ignore a CSS hidden specification of the element (but not of nested elements). Default of ignorehide is true.

If you use actor or actorHide to create the transition, paint will be done automatically. Otherwise you need to call paint or paintElement. Normally however, paint is required just once per element (and can be shared among various transitions for the same element). Refer to Texture Canvas for details. For blend and similar operations it sometimes is required to paint the element to the second or Alternate Canvas.


taccgl.a("testimg").paint().start(); RUN
taccgl.a("testimg2").paint().start(); RUN
taccgl.a("testimg2").paint(2).blend(0,1).start(); RUN
taccgl.a("testimg").paint(); taccgl.a("testimg2").paint(2).blendA(1,0,0,1).start(); RUN


Note that the element is painted to the mapped texture coordinates. Per default these are the ordinary coordinates of the HTML element. You can, however, use map, mapScale, and companions to change the texture coordinates. A first typical use for this mechanism are very long pages. Since the texture canvase's size is limited the normal paint mechanism stops working for elements at the end of the page. The following example works, regardless where the animated paragraph appear on the page, even if the page is very long.


taccgl.a("ex").map(0,0).paint().hide().visFinal().rotateMiddle(0,0,1).start(); RUN

Care needs to be taken, not to map multiple elements to the same coordinates, since overlapping elements on the texture canvas can has undesirable effects, see .

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:transition.texClear - Clear Portion of Texture Canvas
Previous Page: transition.bgColor - Set background color / color animation
Please Add a Comment or Question, click here!