itextsharp add annotation to existing pdf c# : Check links in pdf software application cloud windows html web page class 1487-part1774

CHAPTER 4
Let’s Call It a Draw(ing Surface)
Diving In
HTML5 defines the 
<canvas>
element as “a resolution-dependent bitmap canvas which
can be used for rendering graphs, game graphics, or other visual images on the fly.” A
canvas is a rectangle on your page in which you can use JavaScript to draw anything
you want. The following table shows which browsers offer basic canvas support at the
time of this writing:
IE
a
Firefox
Safari
Chrome
Opera
iPhone
Android
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
aInternet Explorer support requires the third-party explorercanvas library.
So what does a canvas look like? Nothing, really. A 
<canvas>
element has no content
and no border of its own. The markup looks like this:
<canvas width="300" height="225"></canvas>
Figure 4-1 shows the canvas with a dotted border so we can see what we’re dealing with.
You can have several 
<canvas>
elements on the same page. Each canvas will show up
in the DOM, and each canvas maintains its own state. If you give each canvas an 
id
attribute, you can access them just like you would any other element.
Let’s expand that markup to include an 
id
attribute:
<canvas id="a" width="300" height="225"></canvas>
Now we can easily find that 
<canvas>
element in the DOM:
var a_canvas = document.getElementById("a");
57
Download from Library of Wow! eBook <www.wowebook.com>
Check links in pdf - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding an email link to a pdf; add url to pdf
Check links in pdf - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add email link to pdf; add links to pdf document
Figure 4-1. Canvas with border
Simple Shapes
IE
a
Firefox
Safari
Chrome
Opera
iPhone
Android
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
aInternet Explorer support requires the third-party explorercanvas library.
Every canvas starts out blank. That’s boring! Let’s draw something. You can use the
onclick
handler to call a function that draws a rectangle (see http://diveintohtml5.org/
canvas.html for an interactive example):
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
The first line of the function is nothing special; it just finds the 
<canvas>
element in the
DOM. The second line is where it gets more interesting. Every canvas has a drawing
context, which is where all the fun stuff happens. Once you’ve found a 
<canvas>
element
in the DOM (by using 
document.getElementById()
or any other method you like), you
can call its 
getContext()
method. You must pass the string 
"2d"
to the 
getContext()
method:
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
58 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
C# PDF Convert to HTML SDK: Convert PDF to html files in C#.net
toolkit SDK, preserves all the original anchors, links, bookmarks and using RasterEdge.XDoc.PDF; program with an incorrect format", please check your configure
add links pdf document; add a link to a pdf
.NET PDF Document Viewing, Annotation, Conversion & Processing
Add, edit, delete links. Form Process. Online Demo See the PDF SDK for .NET in action and check how much they can do for you. See Pricing
accessible links in pdf; pdf email link
Ask Professor Markup
Q: Is there a 3D canvas?
A: Not yet. Individual vendors have experimented with their own three-dimensional
canvas APIs, but none has been standardized. The HTML5 specification notes, “A
future version of this specification will probably define a 3d context.”
So, you have a 
<canvas>
element, and you have its drawing context. The drawing con-
text is where all the drawing methods and properties are defined. There’s a whole group
of properties and methods devoted to drawing rectangles:
• The 
fillStyle
property can be a CSS color, a pattern, or a gradient. (More on
gradients shortly.) The default 
fillStyle
is solid black, but you can set it to what-
ever you like. Each drawing context remembers its own properties as long as the
page is open, unless you do something to reset it.
fillRect(x, y, width, height)
draws a rectangle filled with the current fill style.
• The 
strokeStyle
property is like 
fillStyle
—it can be a CSS color, a pattern, or a
gradient.
strokeRect(x, y, width, height)
draws a rectangle with the current stroke style.
strokeRect
doesn’t fill in the middle; it just draws the edges.
clearRect(x, y, width, height)
clears the pixels in the specified rectangle.
Ask Professor Markup
Q: Can I “reset” a canvas?
A: Yes. Setting the width or height of a 
<canvas>
element will erase its contents and
reset all the properties of its drawing context to their default values. You don’t even
need to change the width; you can simply set it to its current value, like this:
var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width;
Getting back to that code in the previous example:
var b_canvas = document.getElementById("b");   
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
Calling the 
fillRect()
method draws the rectangle and fills it with the current fill style,
which is black until you change it. The rectangle is bounded by its upper-left corner
(50, 25)
, its width 
(150)
, and its height 
(100)
. To get a better picture of how that works,
let’s look at the canvas coordinate system.
Simple Shapes | 59
Download from Library of Wow! eBook <www.wowebook.com>
C# PDF Convert to Word SDK: Convert PDF to Word library in C#.net
original text style (including font, size, color, links and boldness using RasterEdge.XDoc.PDF; a program with an incorrect format", please check your configure
add links to pdf in acrobat; add hyperlink to pdf in
C# PDF Page Replace Library: replace PDF pages in C#.net, ASP.NET
text, images, interactive elements, such as links and bookmarks using RasterEdge. XDoc.PDF; load a program with an incorrect format", please check your configure
add hyperlink to pdf; add hyperlink to pdf online
Canvas Coordinates
The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper-left corner
of the canvas. Along the x-axis, values increase toward the right edge of the canvas.
Along the y-axis, values increase toward the bottom edge of the canvas.
The coordinate diagram in Figure 4-2 was drawn with a 
<canvas>
element. It comprises:
• A set of off-white vertical lines
• A set of off-white horizontal lines
• Two black horizontal lines
• Two small black diagonal lines that form an arrow
• Two black vertical lines
• Two small black diagonal lines that form another arrow
• The letter “x”
• The letter “y”
• The text “(0, 0)” near the upper-left corner
• The text “(500, 375)” near the lower-right corner
• A dot in the upper-left corner, and another in the lower-right corner
Figure 4-2. Canvas coordinates diagram
60 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
In the following sections, we’ll explore how to create the effect shown in this figure.
First, we need to define the 
<canvas>
element itself. The 
<canvas>
element defines the
width
and 
height
of the rectangle, and the 
id
so we can find it later:
<canvas id="c" width="500" height="375"></canvas>
Then we need a script to find the 
<canvas>
element in the DOM and get its drawing
context:
var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");
Now we can start drawing lines.
Paths
IE
a
Firefox
Safari
Chrome
Opera
iPhone
Android
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
aInternet Explorer support requires the third-party explorercanvas library.
Imagine you’re drawing a picture in ink. You don’t want to just dive in and start draw-
ing, because you might make a mistake. Instead, you sketch the lines and curves with
a pencil, and once you’re happy with it, you trace over your sketch in ink.
Each canvas has a path. Defining the path is like drawing with a pencil. You can draw
whatever you like, but it won’t be part of the finished product until you pick up the
quill and trace over your path in ink.
To draw straight lines in pencil, you use the following two methods:
moveTo(x, y)
moves the pencil to the specified starting point.
lineTo(x, y)
draws a line to the specified ending point.
The more you call 
moveTo()
and 
lineTo()
, the bigger the path gets. These are “pencil”
methods—you can call them as often as you like, but you won’t see anything on the
canvas until you call one of the “ink” methods.
Let’s begin by drawing the off-white grid:
for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);   
}
for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);   
}
Paths | 61
Download from Library of Wow! eBook <www.wowebook.com>
Those were all “pencil” methods. Nothing has actually been drawn on the canvas yet.
We need an “ink” method to make it permanent:
context.strokeStyle = "#eee";
context.stroke();
stroke()
is one of the “ink” methods. It takes the complex path you defined with
all those 
moveTo()
and 
lineTo()
calls,  and  actually draws  it on the  canvas.  The
strokeStyle
controls the color of the lines. Figure 4-3 shows the result.
Figure 4-3. A grid drawn on a canvas
Ask Professor Markup
Q: Why did you start 
x
and 
y
at 
0.5
? Why not 
0
?
A: Imagine each pixel as a large square. The whole-number coordinates (
0
1
2
...) are
the edges of the squares. If you draw a one-unit-wide line between whole-number
coordinates, it will overlap opposite sides of the pixel square, and the resulting line will
be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift
the coordinates by 0.5 perpendicular to the line’s direction.
62 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
Now let’s draw the horizontal arrow. All the lines and curves on a path are drawn in
the same color (or gradient—yes, we’ll get to those soon). We want to draw the arrow
in a different color ink—black instead of off-white—so we need to start a new path:
context.beginPath();
context.moveTo(0, 40);
context.lineTo(240, 40);
context.moveTo(260, 40);
context.lineTo(500, 40);
context.moveTo(495, 35);
context.lineTo(500, 40);
context.lineTo(495, 45);
The vertical arrow looks much the same. Since the vertical arrow is the same color as
the horizontal arrow, we do not need to start another new path. The two arrows will
be part of the same path:
context.moveTo(60, 0);
context.lineTo(60, 153);
context.moveTo(60, 173);   
context.lineTo(60, 375);
context.moveTo(65, 370);
context.lineTo(60, 375);
context.lineTo(55, 370);
I said these arrows were going to be black, but the 
strokeStyle
is still off-white. (The
fillStyle
and 
strokeStyle
don’t get reset when you start a new path.) That’s OK,
because we’ve just run a series of “pencil” methods. But before we draw it for real, in
“ink,” we need to set the 
strokeStyle
to black. Otherwise, these two arrows will be off-
white, and we’ll hardly be able to see them! The following lines change the color to
black and draw the lines on the canvas:
context.strokeStyle = "#000";
context.stroke();
Figure 4-4 shows the result.
Text
IE
a
Firefox
b
Safari
Chrome
Opera
iPhone
Android
7.0+
3.0+
3.0+
3.0+
10.0+
1.0+
1.0+
aInternet Explorer support requires the third-party explorercanvas library.
bMozilla Firefox 3.0 support requires a compatibility shim.
In addition to drawing lines on a canvas, you can also draw text on a canvas. Unlike
text on the surrounding web page, there is no box model. That means none of the
familiar CSS layout techniques are available: no floats, no margins, no padding, no
word wrapping. (Maybe you think that’s a good thing!) You can set a few font attrib-
utes, then you pick a point on the canvas and draw your text there.
Text | 63
Download from Library of Wow! eBook <www.wowebook.com>
Figure 4-4. Unlabeled axes drawn on a canvas
The  following  font  attributes are  available  on the  drawing  context  (see “Simple
Shapes” on page 58):
font
can be anything you would put in a CSS 
font
rule. That includes font style,
font variant, font weight, font size, line height, and font family.
textAlign
controls text  alignment.  It is  similar  (but not  identical)  to  a  CSS
text-align
rule. Possible values are 
start
end
left
right
, and 
center
.
textBaseline
controls where the text is drawn relative to the starting point. Possible
values are 
top
hanging
middle
alphabetic
ideographic
, and 
bottom
.
textBaseline
is tricky, because text is tricky. (Well, English text isn’t tricky, but you
can draw any Unicode character you like on a canvas, and Unicode is tricky.) The
HTML5 specification explains the different text baselines:*
The top of the em square is roughly at the top of the glyphs in a font, the hanging baseline
is where some glyphs like ը are anchored, the middle is half-way between the top of the
em square and the bottom of the em square, the alphabetic baseline is where characters
like Á, ÿ, f, and Ω are anchored, the ideographic baseline is where glyphs like 私 and
達 are anchored, and the bottom of the em square is roughly at the bottom of the glyphs
in a font. The top and bottom of the bounding box can be far from these baselines, due
to glyphs extending far outside the em square (see Figure 4-5 ).
http://bit.ly/aHCdDO
64 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
For simple alphabets like English, you can safely stick with 
top
middle
, or 
bottom
for
the 
textBaseline
property.
Let’s draw some text! Text drawn inside the canvas inherits the font size and style of
the 
<canvas>
element itself, but you can override this by setting the 
font
property on
the drawing context:
context.font = "bold 12px sans-serif";   
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
The 
fillText()
method draws the actual text:
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);   
context.fillText("y", 58, 165);
Ask Professor Markup
Q: Can I use relative font sizes to draw text on a canvas?
A: Yes. Like every other HTML element on your page, the 
<canvas>
element itself has
a computed font size based on your page’s CSS rules. If you set the 
context.font
prop-
erty to a relative font size like 
1.5em
or 
150%
, your browser multiplies this by the com-
puted font size of the 
<canvas>
element itself.
For the text in the upper-left corner, say we want the top of the text to be at 
y=5
. But
we’re lazy—we don’t want to measure the height of the text and calculate the baseline.
Instead, we can set 
textBaseline
to 
top
and pass in the upper-left coordinate of the
text’s bounding box:
context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);
Figure 4-5. Text baselines
Text | 65
Download from Library of Wow! eBook <www.wowebook.com>
Now for the text in the lower-right corner. Let’s say we want the bottom-right corner
of the text to be at coordinates 
(492,370)
—just a few pixels away from the bottom-
right corner of the canvas—but again, we don’t want to measure the width or height
of the text. We can set 
textAlign
to 
right
and 
textBaseline
to 
bottom
, then call
fillText()
with the bottom-right coordinates of the text’s bounding box:
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);
Figure 4-6 shows the result.
Figure 4-6. Labeled axes on a canvas
Oops! We forgot the dots in the corners. We’ll see how to draw circles a little later; for
now we’ll cheat a little and draw them as rectangles (see “Simple Shapes” on page 58):
context.fillRect(0, 0, 3, 3);   
context.fillRect(497, 372, 3, 3);
And that’s all she wrote! Figure 4-7 shows the final product.
66 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
Documents you may be interested
Documents you may be interested