The Block entity can be dragged around the <canvas> element
Pattern
Repeat
Matrix
Stretch X:
Skew X:
Shift X:
Stretch Y:
Skew Y:
Shift Y:
Lock fill style to entity
To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
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
Flip-upend
Flip-reverse
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
Cell-locked patterns will act like a static background covering the cell, appearing only where the entity fill or stroke appears; they do not move, scale or rotate with the entity
Entity-locked patterns will act as a fill or stroke on the entity which moves, scales and rotates with the entity
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)
Known issue: The Firefox browser has a longstanding bug where it only recognises the 'repeat' and 'no-repeat' values for the Pattern `repeat` attribute. Also, the 'no-repeat' value will produce faulty output.