WebGL Component


Draw [Data = {type: "canvas", pos, co, ctx}]
when the entity is ready to be drawn to the stage
if the browser does not support canvas

When this component is added to an entity it will be drawn to the global webgl canvas element. Its canvas element (and hence any WebGL entity) is always rendered below any DOM entities.

Sprite, Image, SpriteAnimation, and Color all support WebGL rendering. Text entities will need to use DOM or Canvas for now.

If a webgl context does not yet exist, a WebGL entity will automatically create one.

Note: For better performance, minimize the number of spritesheets used, and try to arrange it so that entities with different spritesheets are on different z-levels. This is because entities are rendered in z order, and only entities sharing the same texture can be efficiently batched.

Create a webgl entity like this

var myEntity = Crafty.e("2D, WebGL, Color")
     .color(1, 1, 0, 0.5)
     .attr({x: 13, y: 37, w: 42, h: 42});



Back to top


The webgl context this entity will be rendered to.

Back to top


public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])

Optionally supply a different r 2D context if drawing on another canvas is required


X offset for drawing a segment


Y offset for drawing a segment


Width of the segment to draw


Height of the segment to draw

An internal method to draw the entity on the webgl canvas element. Rather then rendering directly, it writes relevent information into a buffer to allow batch rendering.