Canvas 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 canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities.

The canvas layer will be automatically initialized if it has not been created yet.

Create a canvas entity like this

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


Back to top


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

Canvas 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

Method to draw the entity on the canvas element. Can pass rect values for redrawing a segment of the entity.