35
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;
Final Version of Text Arranger | 121
47
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;
122 | Chapter 3: The HTML5 Canvas Text API
C# Imaging - Scan Barcode Image in C#.NET C# Barcode Image Reader - Barcode Types. You can get free sample C# codes for barcodes scanning in .NET Recognize PDF-417 2D barcode in .NET WinForms & ASP.NET
pdf form data extraction; extracting data from pdf into excel
44
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) {
var target = e.target;
textBaseline = target.value;
drawScreen();
}
function textAlignChanged(e) {
var target = e.target;
textAlign = target.value;
drawScreen();
}
function fillOrStrokeChanged(e) {
var target = e.target;
fillOrStroke = target.value;
drawScreen();
}
function textSizeChanged(e) {
var target = e.target;
fontSize = target.value;
drawScreen();
}
function textFillColorChanged(e) {
var target = e.target;
textFillColor = "#" + target.value;
drawScreen();
}
function textFontChanged(e) {
Final Version of Text Arranger | 123
C# PDF: How to Create PDF Document Viewer in C#.NET with web service application, Windows Forms application and mobile application. The PDF document viewer & reader created by this C#.NET imaging toolkit can be used
how to save fillable pdf form in reader; change font size pdf form reader
45
var target = e.target;
fontFace = target.value;
drawScreen();
}
function fontWeightChanged(e) {
var target = e.target;
fontWeight = target.value;
drawScreen();
}
function fontStyleChanged(e) {
var target = e.target;
fontStyle = target.value;
drawScreen();
}
function shadowXChanged(e) {
var target = e.target;
shadowX = target.value;
drawScreen();
}
function shadowYChanged(e) {
var target = e.target;
shadowY = target.value;
drawScreen();
}
function shadowBlurChanged(e) {
var target = e.target;
shadowBlur = target.value;
drawScreen();
}
function shadowColorChanged(e) {
var target = e.target;
shadowColor = target.value;
drawScreen();
}
function textAlphaChanged(e) {
var target = e.target;
textAlpha = (target.value);
drawScreen();
}
function textFillColor2Changed(e) {
var target = e.target;
textFillColor2 = "#" + target.value;
drawScreen();
}
124 | Chapter 3: The HTML5 Canvas Text API
C# Word - Word Conversion in C#.NET Various image forms can be converted from Word document, including Jpeg control enable users to convert PDF to Word ODT file also can be converted to Word with
fill in pdf form reader; extract pdf form data to excel
43
function fillTypeChanged(e) {
var target = e.target;
fillType = target.value;
drawScreen();
}
function canvasWidthChanged(e) {
var target = e.target;
theCanvas.width = target.value;
drawScreen();
}
function canvasHeightChanged(e) {
var target = e.target;
theCanvas.height = target.value;
drawScreen();
}
function canvasStyleSizeChanged(e) {
var styleWidth = document.getElementById("canvasStyleWidth");
var styleHeight = document.getElementById("canvasStyleHeight");
var styleValue = "width:" + styleWidth.value + "px; height:" +
styleHeight.value +"px;";
theCanvas.setAttribute("style", styleValue );
drawScreen();
}
function createImageDataPressed(e) {
var imageDataDisplay = document.getElementById("imageDataDisplay");
imageDataDisplay.value = theCanvas.toDataURL();
window.open(imageDataDisplay.value,"canvasImage","left=0,top=0,width=" +
theCanvas.width + ",height=" + theCanvas.height +
",toolbar=0,resizable=0");
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
<form>
Text: <input id="textBox" placeholder="your text" />
<br>
Text Font: <select id="textFont">
Final Version of Text Arranger | 125
53
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<br> Font Weight:
<select id="fontWeight">
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="bolder">bolder</option>
<option value="lighter">lighter</option>
</select>
<br>
Font Style:
<select id="fontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<br>
Text Size: <input type="range" id="textSize"
min="0"
max="200"
step="1"
value="50"/>
<br>
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>
<br>
Text Color: <input class="color" id="textFillColor" value="FF0000"/>
<br>
Text Color 2: <input class="color" id="textFillColor2" value ="000000"/>
<br>
Fill Or Stroke: <select id="fillOrStroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>
</select>
<br>
Text Baseline <select id="textBaseline">
<option value="middle">middle</option>
<option value="top">top</option>
<option value="hanging">hanging</option>
<option value="alphabetic">alphabetic</option>
<option value="ideographic">ideographic</option>
<option value="bottom">bottom</option>
</select>
126 | Chapter 3: The HTML5 Canvas Text API
53
<br>
Text Align <select id="textAlign">
<option value="center">center</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
<br>
Alpha: <input type="range" id="textAlpha"
min="0.0"
max="1.0"
step="0.01"
value="1.0"/>
<br>
Shadow X:<input type="range" id="shadowX"
min="−100"
max="100"
step="1"
value="1"/>
<br>
Shadow Y:<input type="range" id="shadowY"
min="−100"
max="100"
step="1"
value="1"/>
<br>
Shadow Blur: <input type="range" id="shadowBlur"
min="1"
max="100"
step="1"
value="1" />
<br>
Shadow Color: <input class="color" id="shadowColor" value="707070"/>
<br>
Canvas Width: <input type="range" id="canvasWidth"
min="0"
max="1000"
step="1"
value="500"/>
<br>
Canvas Height:
<input type="range" id="canvasHeight"
min="0"
max="1000"
step="1"
value="300"/>
<br>
Canvas Style Width: <input type="range" id="canvasStyleWidth"
min="0"
max="1000"
step="1"
Final Version of Text Arranger | 127
31
value="500"/>
<br>
Canvas Style Height:
<input type="range" id="canvasStyleHeight"
min="0"
max="1000"
step="1"
value="300"/>
<br>
<input type="button" id="createImageData" value="Create Image Data">
<br>
<br>
<textarea id="imageDataDisplay" rows=10 cols=30></textarea>
</form>
</div>
</body>
</html>
Animated Gradients
Before we leave the topic of text, we would like to introduce some animation into the
mix. Everything you have seen so far in this chapter has been pretty much static. While
text on HTML5 Canvas is really cool, it is not too far from what could be accomplished
in standard HTML. Static text is static, and its utility when not being styled with CSS
(again, the Canvas currently does not support CSS styling) might make you choose
another solution for a pure text application.
However, animation is where the Canvas shows its utility beyond standard HTML. For
this example, we will move away from Text Arranger and create some animated text by
using only gradient fills. The gradient fills will “animate” by moving up in the text fill.
The effect here is similar to what old video game and computer systems (especially those
from Atari) used to create animated title screens.
Figure 3-12 shows what a single frame of the animation looks like on the Canvas.
128 | Chapter 3: The HTML5 Canvas Text API
Documents you may be interested
Documents you may be interested