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

icon_brush_default

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_panel_roller_brush3

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

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.

brush_preview2

Weight

slider_weight

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.

Glow

slider_glow

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

icon_roller_default

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

icon_brush_default

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

icon_pencil_default

Below is the Pencil Brush panel:

pencil

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_fur_toggles

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:

neighboring_points_example

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:

fur_brush_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.

fur_brush_ui_group

“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:

fur_brush_example_2

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.

line_cap_example

Circle Brush

icon_circle_default

Below is the Brush Panel with the Circle Brush selected.

circle_brush

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.

velocity_brush

Square Brush

icon_square_default

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

Geometric Brush

icon_star_default

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

slider_vertical_switch

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

Points

slider_points

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

Inner Radius

slider_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:

shape_presets