Canvas Component

src/graphics/canvas.js#L4-L22

Events

Draw [Data = {type: "canvas", pos, co, ctx}]
when the entity is ready to be drawn to the stage
NoCanvas
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")
     .color("green")
     .attr({x: 13, y: 37, w: 42, h: 42});

Methods

Back to top

.draw()

src/graphics/canvas.js#L42-L55
public this .draw([Context ctx, Number x, Number y, Number w, Number h])
ctx

Canvas 2D context if drawing on another canvas is required

x

X offset for drawing a segment

y

Y offset for drawing a segment

w

Width of the segment to draw

h

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.