Demo Canvas 067

To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.

Outer radius

(n)

('n%')

Inner radius

(n)

('n%')

Outer controls distance

(n)

('n%')

Inner controls distance

(n)

('n%')

Outer controls offset

(n)

('n%')

Inner controls offset

(n)

('n%')

Points

Twist

Curve

Show bounding box

Starts ('n%')

Handles ('n%')

Starts (n)

Handles (n)

Starts ('str')

Handles ('str')

Offset ('n%')

Roll

Offset (n)

Scale

Line join

Line width

Method

Scale outline

Winding

Scale shadow

Flip-upend

Flip-reverse

Shadow offset

Shadow blur

Test purpose

Create a Cog entity
Check that we can position the Cog on the canvas, including handle and offset
Check that flip values, roll and scaling does not affect Cog positioning
Check that we can manipulate the Cog-specific attributes

Known issue: for some perverse reason, the entity gets 'jittery' when attempting to animate particular values - scale, control distances or offsets - if the outer radius value is larger (or even very slightly smaller) than the inner radius value. The current fix, if required, is to keep the inner radius larger than the outer radius. Note that this may also impact on entitys defined in relative (%) values in a responsive canvas environment.

Touch test: not required

Annotated code

Scrawl-canvas v8 - Canvas test 067

Cog entity attributes and functionality

Test purpose