Using the Debug Canvas

A Kiwi Game can create a debug canvas that will be added to the layer above the regular game canvas. The debug canvas is not created by default (even with debugging on) and rendering/clearing of the canvas is upto the developer. The context for rendering can be access via the ‘dctx’ property and you can use the ‘clearDebugCanvas’ method to clear the canvas.

To use the Debug canvas you can create it in you create method of your state. This will add an overlay which will have a low opacity.

Once this is done you can treat this canvas like any other canvas but you can also use use some of the in built features of Kiwi.js to draw to it.

You can also clear the canvas easily using the clearDebugCanvas at the start of your update loop

Below is an example of using the debug canvas to see the hitbox of two sprites.

You can find this game in the Kiwi.js Example Repository here inside of the tutorials/core/canvas/ directory.

Share the joy

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">