Scrawl-canvas v8
- Canvas test 061
Gradients stress test
Click on canvas to add more boxes
Gradient
Monochrome
Stepped grays
Red to blue
Red gradient
Hue gradient
Easing
linear
out
in
---
easeOut
easeOutIn
easeInOut
easeIn
easeOut3
easeOutIn3
easeInOut3
easeIn3
easeOut4
easeOutIn4
easeInOut4
easeIn4
easeOut5
easeOutIn5
easeInOut5
easeIn5
---
cosine
hermite
quintic
---
easeOutSine
easeOutInSine
easeInSine
easeOutQuad
easeOutInQuad
easeInQuad
easeOutCubic
easeOutInCubic
easeInCubic
easeOutQuart
easeOutInQuart
easeInQuart
easeOutQuint
easeOutInQuint
easeInQuint
easeOutExpo
easeOutInExpo
easeInExpo
easeOutCirc
easeOutInCirc
easeInCirc
---
easeOutBack
easeOutInBack
easeInBack
easeOutElastic
easeOutInElastic
easeInElastic
easeOutBounce
easeOutInBounce
easeInBounce
---
steps (user-defined)
repeat (user-defined)
Precision
Method
fill
fillThenDraw
Test purpose
Generate a number of Block entitys with gradient fills, spread across the canvas
Add functionality to the canvas element to generate additional Block entitys when user clicks on it
Check the effects on screen refresh speed when:
User changes the gradient displayed by the Block entitys
User changes the gradient easing
User changes the gradient precision value
User changes the Block entity drawing method attribute (add/remove a border)
Touch test:
not required
Annotated code