HTML and CSS Reference
In-Depth Information
function eventAssetsLoaded() {
canvasApp();
}
We are not going to use the pattern variable we created in this function,
as it does not have scope in the
canvasApp()
function. We are merely
using it to make sure that the image is available before we use it.
In the
canvasApp()
function, we will create three variables to support this new func-
tionality.
fillType
describes how the text will be filled (a regular color fill, a linear
gradient, a radial gradient, or a pattern). The
textColorFill2
variable is the second
color we will use for the gradient color stop. Finally, the
pattern
variable holds the
Image
object we preloaded, which we now need to create an instance of in
canvasApp()
:
var fillType = "colorFill";
var textFillColor2 = "#000000";
var pattern = new Image();
...
pattern.src = "texture.jpg";
Now, let's jump to the HTML of our
<form>
. Since we have created different ways to
fill the text we are displaying, we need to build a selection that allows for this choice.
We will create a
<select>
box with the id of
fillType
for this purpose:
Fill Type: <select id="fillType">
<option value="colorFill">Color Fill</option>
<option value="linearGradient">Linear Gradient</option>
<option value="radialGradient">Radial Gradient</option>
<option value="pattern">pattern</option>
</select>
We need to add a second color selection that we can use for the gradient fills. We will
use the
jsColor
picker and the id
textColorFill2
:
Text Color 2: <input class="color" id="textFillColor2" value ="000000"/>
<br>
Back in
canvasApp()
, we need to create the event listeners for our two new form
elements:
formElement = document.getElementById("textFillColor2");
formElement.addEventListener('change', textFillColor2Changed, false);
formElement = document.getElementById("fillType");
formElement.addEventListener('change', fillTypeChanged, false);
We also need to create the associated event handler functions for the new form
elements:
function textFillColor2Changed(e) {
var target = e.target;
textFillColor2 = "#" + target.value;