← Previous Next →

Scrawl-canvas v8 - Canvas test 063

Rectangle entity attributes and functionality

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

Rectangle width
(n)
('n%')
Rectangle height
(n)
('n%')
Offshoot A
 
Offshoot B
 
Show bounding box
 
 
 
 
[radius]
(n)
('n%')
[radiusX]
(n)
('n%')
[radiusY]
(n)
('n%')
[radiusT]
(n)
('n%')
[radiusR]
(n)
('n%')
[radiusB]
(n)
('n%')
[radiusL]
(n)
('n%')
[radiusTX]
(n)
('n%')
[radiusTY]
(n)
('n%')
[radiusRX]
(n)
('n%')
[radiusRY]
(n)
('n%')
[radiusBX]
(n)
('n%')
[radiusBY]
(n)
('n%')
[radiusLX]
(n)
('n%')
[radiusLY]
(n)
('n%')
radiusTLX
(n)
('n%')
radiusTLY
(n)
('n%')
radiusTRX
(n)
('n%')
radiusTRY
(n)
('n%')
radiusBRX
(n)
('n%')
radiusBRY
(n)
('n%')
radiusBLX
(n)
('n%')
radiusBLY
(n)
('n%')
Starts ('n%')
X:
Y:
Handles ('n%')
X:
Y:
Starts (n)
X:
Y:
Handles (n)
X:
Y:
Starts ('str')
X:
Y:
Handles ('str')
X:
Y:
Offset ('n%')
X:
Y:
Roll
 
Offset (n)
X:
Y:
Scale
 
Line join
 
Line width
 
Method
 
Scale outline
 
Winding
 
Scale shadow
 
Flip-upend
 
Flip-reverse
 
Shadow offset
X:
Y:
Shadow blur
 

Test purpose

Known issue: for some perverse reason, the entity gets 'jittery' when corner radiuses are animated beyond reasonable values; this also affects scaling such malformed rectangles. No known fix at this time.

Touch test: not required

Annotated code