# canvasGUI 3 : user-defined controls (2)

**URL:** <https://discourse.processing.org/t/canvasgui-3-user-defined-controls-2/48768>\
**Category:** Libraries\
**Created:** [June 7, 2026, 2:01pm UTC](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-2/48768 "2026-06-07T14:01:44Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [June 7, 2026, 2:01pm UTC](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-2/48768/1 "2026-06-07T14:01:44Z")

</div>

In a previous [discussion](https://discourse.processing.org/t/canvasgui-3-user-defined-controls-1/48529) I described how to create a new control which was a simple aggregate of existing canvasGUI controls.

In this discussion I describe how to extend one of the existing classes to create a control that represents a playing card from a standard 52 card deck. I will call the new class `CvsCard` and it will extend the library class `CvsControl` to get the basic functionality.

The sketch below shows the final control in action and the code is available in the p5js web editor [here](https://editor.p5js.org/canvasgui/sketches/dAYj5p3dt). You might try it out before continuing with the discussion.

The constructor parameters provide all the information needed to identify the card suit, rank and includes images for the card face and back. It then calls the super class constructor which does the rest of the initialization.

The `_doEvent` was copied from the CvsPanel class since we wanted to be able to drag the card and then modified to suit the needs of this control. Also the a `_draw` method was added to to display either the face or back image without the need for an off-screen buffer.

Finally additional methods were added to flip the card over.

https://editor.p5js.org/canvasgui/full/dAYj5p3dt