In a nutshell
The μcaptcha widget is a drawable HTML canvas. Customization options are set via data attributes to those elements that have class="mucaptcha".
Line color
You can change the line color used for drawing by setting data-linecolor="csscolor", where csscolor is any valid CSS color. For instance: #FFFFFF, white or rgb(255,255,255) they all represent the same color. If you don't provide this data attribute, lines are drawn in red color.
Line width
You can change the line width (thickness) used for drawing by setting data-linewidth="number", where number is an integer ≥ 1. If you don't provide this data attribute, the line width is 3.
Background color
You can change the background color by setting data-bgcolor="csscolor", where csscolor is any valid CSS color. If you don't provide this data attribute, the background color is white.
Restrict to mobile users
You can display μcaptcha only to mobile users by setting the canvas attribute data-touchonly="true".
Image size
You can change the size of the μcaptcha image by setting the standard width and height canvas attributes.
For instance, this will render a 400x300 px image:
<canvas class="mucaptcha" width="400" height="300"></canvas>
If you don't set any canvas attributes, the image size will be set according to the size of the received μcaptcha image.
An all-in-one example
This will render a 400x300 μcaptcha challenge on light red background and 1px thick blue lines:
<canvas class="mucaptcha" width="400" height="300" data-bgcolor="rgba(255,0,0,0.3)" data-linewidth="1" data-linecolor="blue"></canvas>
A more advanced example
Imagine that you want to display μcaptcha challenges only to mobile users,
but at the same time you want to display some explanatory text, such as:
<p>Draw these symbols:</p>
<canvas class="mucaptcha" width="400" height="300" data-touchonly="true"></canvas>
In this example, non-mobile users would see the "Draw these symbols" text,
because only the canvas element would be hidden.
To fix this issue, just create a container DIV and set the mucapctha stuff to that DIV:
<div class="mucaptcha" data-touchonly="true">
<p>Draw these symbols:</p>
<canvas width="400" height="300"></canvas>
</div>