Scrawl-canvas v8
- Canvas test 035
Pattern style functionality
The Block entity can be dragged around the <canvas> element
Pattern
Bunny
Leaves
Video
Cell animation
Cat sprite
Repeat
repeat
repeat-x
repeat-y
no-repeat
Matrix
A:
B:
C:
D:
E:
F:
Block width
n%
n
Block height
n%
n
Handles ('n%')
X:
Y:
Handles (n)
X:
Y:
Offset ('n%')
X:
Y:
Offset (n)
X:
Y:
Roll
Scale
Constant linewidth
Scaled linewidth
Flip-upend
false
true
Flip-reverse
false
true
Test purpose
Create a selection of Pattern objects, using images as their asset
Create a Pattern object using a video asset
Create a Cell wrapper which can be animated and used as a pattern
Create a Cell wrapper that hosts a Picture entity using a spritesheet as its asset, which can be animated and used as a pattern
Create a Block entity that uses patterns for its fillStyle attribute
Check that all patterns load and display as required
Check that all patterns are rendered appropriately when the display Block is moved and manipulated (note: patterns will not scale as the Block scales)
Check that all patterns react appropriately as the 'repeat' attribute is updated (in real time)
Check that all patterns react appropriately as each of the six pattern matrix values is manipulated (in real time)
Annotated code