Custom Canvas Drawing in CraftyJS
A lot of people have asked about this and I thought it’s about time I write up a quick example for custom drawing on the canvas in a way that doesn’t break the redraw regions.
The first thing to ensure is that the entity’s width and height is large enough to encapsulate the entire drawing so the redraw region manager knows how much to clear.
The second thing to do is overwrite the draw method. In there we can do our custom 2D canvas drawing.
My example is a Circle drawer. It requires a radius and color:
As you can see I set the width and height to the size of the circle (radius * 2).
I also create a draw method which draws a circle at the entity’s x and y position with an offset of the the radius.
It’s as simple as that. We can have some fun with the custom renderer by adding the Tween component and decreasing the radius over 500 frames.
