• Choose a category
• All
• Classic-Fiction

formElement = document.getElementById("textAlign");

formElement.addEventListener("change", textAlignChanged, false);

formElement = document.getElementById("fontWeight");

formElement.addEventListener("change", fontWeightChanged, false);

formElement = document.getElementById("fontStyle");

formElement.addEventListener("change", fontStyleChanged, false);

formElement = document.getElementById("shadowX");

formElement.addEventListener("change", shadowXChanged, false);

formElement = document.getElementById("shadowY");

formElement.addEventListener("change", shadowYChanged, false);

formElement = document.getElementById("shadowBlur");

formElement.addEventListener("change", shadowBlurChanged, false);

formElement = document.getElementById("shadowColor");

formElement.addEventListener("change", shadowColorChanged, false);

formElement = document.getElementById("textAlpha");

formElement.addEventListener("change", textAlphaChanged, false);

formElement = document.getElementById("textFillColor2");

formElement.addEventListener("change", textFillColor2Changed, false);

formElement = document.getElementById("fillType");

formElement.addEventListener("change", fillTypeChanged, false);

formElement = document.getElementById("canvasWidth");

formElement.addEventListener("change", canvasWidthChanged, false);

formElement = document.getElementById("canvasHeight");

formElement.addEventListener("change", canvasHeightChanged, false);

formElement = document.getElementById("canvasStyleWidth");

formElement.addEventListener("change", canvasStyleSizeChanged, false);

formElement = document.getElementById("canvasStyleHeight");

formElement.addEventListener("change", canvasStyleSizeChanged, false);

formElement = document.getElementById("createImageData");

formElement.addEventListener("click", createImageDataPressed, false);

pattern.src = "texture.jpg";

drawScreen();

function drawScreen() {

//Background

context.globalAlpha = 1;

context.shadowColor = "#707070";

context.shadowOffsetX = 0;

context.shadowOffsetY = 0;

context.shadowBlur = 0;

context.fillStyle = "#ffffaa";

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = "#000000";

context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);

//Text

context.textBaseline = textBaseline;

context.textAlign = textAlign;

context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;

context.shadowColor = shadowColor;

context.shadowOffsetX = shadowX;

context.shadowOffsetY = shadowY;

context.shadowBlur = shadowBlur;

context.globalAlpha = textAlpha;

var xPosition = (theCanvas.width/2);

var yPosition = (theCanvas.height/2);

var metrics = context.measureText(message);

var textWidth = metrics.width;

var tempColor;

if (fillType == "colorFill") {

tempColor = textFillColor;

} else if (fillType == "linearGradient") {

var gradient = context.createLinearGradient(xPosition-

textWidth/2, yPosition, textWidth, yPosition);

gradient.addColorStop(0,textFillColor);

gradient.addColorStop(.6,textFillColor2);

tempColor = gradient;

} else if (fillType == "radialGradient") {

var gradient = context.createRadialGradient(xPosition, yPosition,

fontSize, xPosition+textWidth, yPosition, 1);

gradient.addColorStop(0,textFillColor);

gradient.addColorStop(.6,textFillColor2);

tempColor = gradient;

} else if (fillType == "pattern") {

var tempColor = context.createPattern(pattern,"repeat")

} else {

tempColor = textFillColor;

}

switch(fillOrStroke) {

case "fill":

context.fillStyle = tempColor;

context.fillText (message, xPosition,yPosition);

break;

case "stroke":

context.strokeStyle = tempColor;

context.strokeText (message, xPosition,yPosition);

break;

case "both":

context.fillStyle = tempColor;

context.fillText (message, xPosition,yPosition);

context.strokeStyle = "#000000";

context.strokeText (message, xPosition,yPosition);

break;

}

}

function textBoxChanged(e) {

var target = e.target;

message = target.value;

drawScreen();

}

function textBaselineChanged(e)