The Brush panel is where you can choose and customize your brushes. To begin click or touch the “Brush” icon from the Toolbar:


The Brush Panel opens – the currently selected brush has a grey dot under it (throughout the CanvasPainter interface selections are denoted by a dot next to or under the currently selected item.) In the image below, the “Roller Brush” is selected.


Brush Icons

The Brush icons and their meanings are:

Eraser Brush Eraser Brush
Roller Brush Roller Brush
Bitmap Brush Bitmap Brush
Circle Brush Circle Brush
Square Brush Square Brush
Star Brush Geometric Brush

Global Brush Settings

Three settings are common to all brushes, they are “Pin Brush Preview”, Weight and Glow.

Pin Brush Preview


As you adjust a brush’s settings you will see the Brush Preview appear to the left of the Brush Panel. It will only appear while you are editing brush settings. To “pin” the Brush Preview so that it stays visible during Brush adjustments toggle this option to “on” / green.

The image below illustrates the Pin Brush Preview function and the Brush Preview itself which appears as a box to the left of the Brush Panel.




W – the Weight or thickness of a brush stroke is determined by this setting. Adjust the Weight value by sliding the thumb gripper left / right. Use the Brush Preview box as a guide to setting the size of your brush.



G – This setting adds a small Glow effect to a brush.If you experience performance issues while using the Glow setting then set it to zero (0).

Roller Brush


The Roller Brush behaves much like the paint roller that you you might use to paint a wall. You can control its width and glow.

Bitmap Brushes


Bitmap Brushes mimic the feel of natural brushes. When combined with certain settings you can simulate the physical unevenness of oil-based paints.

Like all brushes you can adjust the Weight and a Glow effect.

Note that you will know if a brush is selected if you see a small circle in its upper right corner (the ubiquitous “selection circle” used throughout CanvasPainter).

The current list of Bitmap brushes:

Bitmap Brush 1 Bitmap Brush 1
Bitmap Brush 2 Bitmap Brush 2
Bitmap Brush 3 Bitmap Brush 3
Bitmap Brush 4 Bitmap Brush 4
Bitmap Brush 5 Bitmap Brush 5
brush_swatch_6 Bitmap Brush 6
Bitmap Brush 7 Bitmap Brush 7
Bitmap Brush 8 Bitmap Brush 8


Pencil Brush


Below is the Pencil Brush panel:


As with all brushes the Pencil Brush’s Weight and Glow can be controlled by the “W” and “G” range sliders.

The Pencil Brush adds concepts pioneered by others in the area of HTML5 Canvas drawing, themselves inspired by open-source drawing software. Within CanvasPainter these concepts endear themselves towards sketching / drawing and so we categorize them as “Pencil Brushes”.

The concepts implemented within CanvasPainter are the Neighboring Points and Fur Brush techniques.


Neighboring Points

Its easiest to notice the effects of this brush option by setting lower Weight values (smaller brush sizes).

The Neighboring Points technique applies to each individual brush stroke. While you draw CanvasPainter remembers each X/Y coordinate that your stroke passes through. If any part of your brush stroke should happen to come close to any previous part of the same stroke then a “web” of lines are drawn between the previous points and the new points. Thus the “Neighboring Points” name of this technique.

Faster brush strokes that come close to themselves produce fewer “web” connections while slower strokes that come close to each other produce more.

Here is an example of a bit of scribbling that shows the Neighboring Points effect in play:


Fur Brush

The Fur Brush draws additional lines in such a way as to create a “furry” line, one that is more dense with “fur” for slower brush strokes and more sparse with faster strokes.

See this example:


This brush can be controlled with the two range sliders that become available when you toggle on the Fur Brush Setting. Additionaly, the Line Cap select list also impacts the Fur Brush. See the following image which shows the Fur Brush enabled and the two range sliders and select list beneath it.


“Length” and “Alpha” Range Sliders

The Length of the fur can be adjusted using the “L” range slider.

The Alpha transparency of the fur can be adjusted by the “A” range slider.

Here is an example of a scribble that has long fur with a low alpha setting:


Line Cap

The Line Cap options controls how the end of each “fur line” looks – giving it either a rounded or squared off end. The next image shows a larger brush with a Round Line Cap on the left, and a Square Line Cap on the right.


Circle Brush


Below is the Brush Panel with the Circle Brush selected.


As with all brushes you can adjust the Weight and the Glow. Unlike the other brush types it also includes a “Velocity Brush” option.

To enable the “Velocity Brush” simply click or tap on the Velocity Brush Toggle. You can start painting with this setting enabled or you can start adjusting the 2 settings for the Velocity Brush that are now enabled.

  • Randomness: Circles are plotted to the page in different sizes from 1 to the Weight value of the brush. The result is a slightly more uneven or “bubbly’ looking brush stroke.
  • V: This slide adjusts the Velocity Threshold of the brush which is where the speed of your brush stroke effects how the stroke is painted to the canvas.

The following image contains an example of using the Velocity Brush.


Square Brush


The Square brush is another obviously-named brush. You can control both the weight and glow.

Geometric Brush


The Geometric Brush is capable of creating multi-sided objects and star-like shapes. As with all brushes you can control the Weight and Glow . From top-to-bottom, here is what each UI element does:

Vertical Switch


The vertical switch will flip the brush vertically / upside-down.



P – Points, specify the number of points for the geometric shape.

Inner Radius


IR – Inner Radius. Every other Point is a coordinate that can be pushed outside of the outer radius (defined by the shapes Weight) or pulled in within the outer radius. At smaller values you can create geometric shapes such as an 8-sided octogon or a triangle. At other settings you can create an endless variety of star shapes.

Preset shapes

In addition to the above a suite of preset shapes are available to choose from: