open pdf and draw c# : Add link to pdf control software system azure winforms html console %5BO%60Reilly%5D%20-%20JavaScript.%20The%20Definitive%20Guide,%206th%20ed.%20-%20%5BFlanagan%5D67-part1600

// Make that path the clipping region.
c.clip();   
// Stroke the path with a 5 pixel line, entirely inside the clipping region.
c.lineWidth = 10;       // Half of this 10 pixel line will be clipped away
c.stroke();
// Fill the parts of the rectangle and text that are inside the clipping region
c.fillStyle = "#aaa"              // Light gray
c.fillRect(175, 25, 50, 325);     // Fill the vertical stripe
c.fillStyle = "#888"              // Darker gray
c.fillText("<canvas>", 15, 330);  // Fill the text
It is important to note that when you call 
clip()
, the current path is itself clipped to
the current clipping region, and then that clipped path becomes the new clipping re-
gion. This means that the 
clip()
method can shrink the clipping region but can never
enlarge it. There is no method to reset the clipping region, so before calling 
clip()
you
should typically call 
save()
, so that you can later 
restore()
the unclipped region.
21.4.11  Shadows
Four graphics attribute properties of the CanvasRenderingContext2D object control
the drawing of drop shadows. If you set these properties appropriately, any line, area,
text, or image you draw will be given a drop shadow, which will make it appear as if it
is floating above the canvas surface. Figure 21-14 shows shadows beneath a filled rec-
tangle, a stroked rectangle, and filled text.
The 
shadowColor
property specifies the color of the shadow. The default is fully trans-
parent black, and shadows will never appear unless you set this property to a translucent
or opaque color. This property can only be set to a color string: patterns and gradients
are not allowed for shadows. Using a translucent shadow color produces the most
realistic shadow effects because it allows the background to show through.
The 
shadowOffsetX
and 
shadowOffsetY
properties specify the X and Y offsets of the
shadow. The default for both properties is 0, which places the shadow directly beneath
your drawing, where it is not visible. If you set both properties to a positive value,
shadows will appear below and to the right of what you draw, as if there were a light
source above and to the left, shining onto the canvas from outside the computer screen.
Larger offsets produce larger shadows and make drawn objects appear as if they are
floating “higher” above the canvas.
The 
shadowBlur
property specifies how blurred the edges of the shadow are. The default
value is 0, which produces crisp, unblurred shadows. Larger values produce more blur,
up to an implementation-defined upper bound. This property is a parameter to a Gaus-
sian blur function and is not a size or length in pixels.
Example 21-8 shows the code used to produce Figure 21-14 and demonstrates each of
these four shadow properties.
21.4  Graphics in a <canvas> | 653
Client-Side
JavaScript
Add link to 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
clickable links in pdf from word; add hyperlink to pdf in preview
Add link to 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 hyperlinks to pdf online; add hyperlink to pdf
Example 21-8. Setting shadow attributes
// Define a subtle shadow
c.shadowColor = "rgba(100,100,100,.4)"; // Translucent gray
c.shadowOffsetX = c.shadowOffsetY = 3;  // Shadow offset to lower right
c.shadowBlur = 5;                       // Soften shadow edges
// Draw some text in a blue box using that shadow
c.lineWidth = 10;
c.strokeStyle = "blue";
c.strokeRect(100, 100, 300, 200);       // Draw a rectangle
c.font = "Bold 36pt Helvetica";
c.fillText("Hello World", 115, 225);    // Draw some text
// Define a less subtle shadow. A larger offset makes items "float" higher.
// Note how the transparent shadow overlaps the blue box.
c.shadowOffsetX = c.shadowOffsetY = 20;
c.shadowBlur = 10;
c.fillStyle = "red";                    // Draw a solid red rectangle
c.fillRect(50,25,200,65);               // that floats above the blue box
The 
shadowOffsetX
and 
shadowOffsetY
properties are always measured in the default
coordinate space and are not affected by the 
rotate()
or 
scale()
methods. Suppose,
Figure 21-14. Automatically generated shadows
654 | Chapter 21: Scripted Media and Graphics
C# PDF Library SDK to view, edit, convert, process PDF file for C#
editing PDF document hyperlink (url) and quick navigation link in PDF bookmark. C#.NET: Edit PDF Metadata. PDF SDK for .NET allows you to read, add, edit, update
add link to pdf; add link to pdf acrobat
RasterEdge .NET Document Imaging Trial Package Download Link.
Extract; C# Read: PDF Image Extract; C# Write: Insert text into PDF; C# Write: Add Image to PDF; C# Protect: Add Password to PDF; C#
convert doc to pdf with hyperlinks; add hyperlink pdf document
for example, that you rotate the coordinate system by 90 degrees to draw some vertical
text and then restore the old coordinate system to draw horizontal text. Both the vertical
and horizontal text will have shadows oriented in the same direction, which is what
you probably want. Similarly, shapes drawn with different scaling transforms will still
have shadows of the same “height”.
2
21.4.12  Images
In addition to vector graphics (paths, lines, etc.), the Canvas API also supports bitmap
images. The 
drawImage()
method copies the pixels of a source image (or of a rectangle
within the source image) onto the canvas, scaling and rotating the pixels of the image
as necessary.
drawImage()
can be invoked with three, five, or nine arguments. In all cases, the first
argument is the source image from which pixels are to be copied. This image argument
is often an 
<img>
element or an off-screen image created with the 
Image()
constructor,
but it can also be another 
<canvas>
element or even a 
<video>
element. If you specify
an 
<img>
or 
<video>
element that is still loading its data, the 
drawImage()
call will do
nothing.
In the three-argument version of 
drawImage()
, the second and third arguments specify
the X and Y coordinates at which the upper left corner of the image is to be drawn. In
this version of the method, the entire source image is copied to the canvas. The X and
Y coordinates are interpreted in the current coordinate system and the image is scaled
and rotated if necessary.
The five-argument version of 
drawImage()
adds 
width
and 
height
arguments to the 
x
and 
y
arguments described above. These four arguments define a destination rectangle
within the canvas. The upper left corner of the source image goes at 
(x,y)
and the lower
right corner goes at 
(x+width, y+height)
. Again, the entire source image is copied. The
destination rectangle is measured in the current coordinate system. With this version
of the method, the source image will be scaled to fit the destination rectangle, even if
no scaling transform has ever been specified.
The nine-argument version of 
drawImage()
specifies both a source rectangle and a des-
tination rectangle and copies only the pixels within the source rectangle. Arguments
two through five specify the source rectangle. They are measured in CSS pixels. If the
source image is another canvas the source rectangle uses the default coordinate system
for that canvas and ignores any transformations that have been specified. Arguments
six through nine specify the destination rectangle into which the image is drawn and
are in the current coordinate system of the canvas, not in the default coordinate system.
Example 21-9 is a simple demonstration of 
drawImage()
. It uses the nine-argument
version to copy pixels from a portion of a canvas and draw them, enlarged and rotated
2. At the time of this writing, Google’s Chrome browser, version 5, gets this wrong and transforms the
shadow offsets.
21.4  Graphics in a <canvas> | 655
Client-Side
JavaScript
C# PDF insert image Library: insert images into PDF in C#.net, ASP
C#.NET PDF SDK - Add Image to PDF Page in C#.NET. How to Insert & Add Image, Picture or Logo on PDF Page Using C#.NET. Add Image to PDF Page Using C#.NET.
add links to pdf document; pdf email link
VB.NET PDF insert image library: insert images into PDF in vb.net
VB.NET PDF - Add Image to PDF Page in VB.NET. Guide VB.NET Programmers How to Add Images in PDF Document Using XDoc.PDF SDK for VB.NET.
pdf link open in new window; convert excel to pdf with hyperlinks
back onto the same canvas. As you can see in Figure 21-15, the image is enlarged enough
to be pixelated, and you can see the translucent pixels used to smooth the edges of
the line.
Figure 21-15. Pixels enlarged with drawImage()
Example 21-9. Using drawImage()
// Draw a line in the upper left
c.moveTo(5,5);
c.lineTo(45,45);
c.lineWidth = 8;
c.lineCap = "round";
c.stroke();
// Define a transformation
c.translate(50,100);       
c.rotate(-45*Math.PI/180); // Straighten out the line
c.scale(10,10);            // Enlarge it so we can see the individual pixels
// Use draw image to copy the line
c.drawImage(c.canvas,
0, 0, 50, 50,  // source rectangle: untransformed
0, 0, 50, 50); // destination rectangle: transformed
In addition to drawing images into a canvas, we can also extract the content of a canvas
as an image using the 
toDataURL()
method. Unlike all the other methods described here,
toDataURL()
is a method of the Canvas element itself, not of the CanvasRendering-
Context2D object. You normally invoke 
toDataURL()
with no arguments, and it returns
the content of the canvas as a PNG image, encoded as a string using a 
data:
URL. The
returned URL is suitable for use with an 
<img>
element, and you can make a static
snapshot of a canvas with code like this:
var img = document.createElement("img");  // Create an <img> element
img.src = canvas.toDataURL();             // Set its src attribute
document.body.appendChild(img);           // Append it to the document
All browsers are required to support the PNG image format. Some implementations
may support other formats as well, and you can specify the desired MIME type with
the optional first argument to 
toDataURL()
. See the reference page for details.
There  is  one important  security restriction you  must  be aware of when  using
toDataURL()
. To prevent cross-origin information leaks, 
toDataURL()
does not work on
656 | Chapter 21: Scripted Media and Graphics
VB.NET PDF Password Library: add, remove, edit PDF file password
VB: Add Password to PDF with Permission Settings Applied. This VB.NET example shows how to add PDF file password with access permission setting.
pdf link to specific page; add hyperlinks to pdf
C# PDF Password Library: add, remove, edit PDF file password in C#
C# Sample Code: Add Password to PDF with Permission Settings Applied in C#.NET. This example shows how to add PDF file password with access permission setting.
add links to pdf; add hyperlink pdf file
<canvas>
elements that are not “origin-clean.” A canvas is not origin-clean if it has ever
had  an  image  drawn  in  it  (directly  by 
drawImage()
or  indirectly  through
a CanvasPattern) that has a different origin than the document that contains the canvas.
21.4.13  Compositing
When you stroke lines, fill regions, draw text, or copy images, you expect the new pixels
to be drawn on top of the pixels that are already in the canvas. If you are drawing opaque
pixels, they simply replace the pixels that are already there. If you are drawing with
translucent pixels, the new (“source”) pixel is combined with the old (“destination”)
pixel so that the old pixel shows through the new pixel based on how transparent that
pixel is.
This process of combining new translucent source pixels with existing destination pix-
els is called compositing, and the compositing process described above is the default
way that the Canvas API combines pixels. You don’t always want compositing to hap-
pen, however. Suppose you’ve drawn into a canvas using translucent pixels and now
want to make a temporary alteration to the canvas and then restore it to its original
state. An easy way to do this is to copy the canvas (or a region of it) to an offscreen
canvas using 
drawImage()
. Then, when it is time to restore the canvas, you can copy
your pixels from the offscreen canvas in which you saved them back to the on-screen
canvas. Remember, though, that the pixels you saved were translucent. If compositing
is on, they won’t fully obscure and erase the temporary drawing you’ve done. In this
scenario, you need a way to turn compositing off: to draw the source pixels and ignore
the destination pixels regardless of the transparency of the source.
To specify the kind of compositing to be done, set the 
globalCompositeOperation
prop-
erty. The default value is “source-over”, which means that source pixels are drawn
“over” the destination pixels and are combined with them if the source is translucent.
If you set this property to “copy”, compositing is turned off: source pixels are copied
to  the  canvas  unchanged  and  destination  pixels  are  ignored.  Another
globalCompositeOperation
value that is sometimes useful is “destination-over”. This
kind of compositing combines pixels as if the new source pixels were drawn beneath
the existing destination pixels. If the destination is translucent or transparent, some or
all of the source pixel color is visible in the resulting color.
“source-over”, “destination-over”, and “copy” are three of the most commonly used
types  of  compositing,  but  the  Canvas  API  supports  11  values  for  the
globalCompositeOperation
attribute. The names of these compositing operations are
suggestive of what they do, and you can go a long way toward understanding compo-
siting by combining the operation names with visual examples of how they work.
Figure 21-16 illustrates all 11 operations using “hard” transparency: all the pixels in-
volved are fully opaque or fully transparent. In each of the 11 boxes, the square is drawn
first and serves as the destination. Next 
globalCompositeOperation
is set, and the circle
is drawn as the source.
21.4  Graphics in a <canvas> | 657
Client-Side
JavaScript
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# of PDF document, including editing PDF url links and quick navigation link in bookmark
adding links to pdf document; add a link to a pdf file
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET of PDF document, including editing PDF url links and quick navigation link in bookmark
add links to pdf in acrobat; adding a link to a pdf
Figure 21-16. Compositing operations with hard transparency
Figure 21-17 is a similar example that uses “soft” transparency. In this version, the
source circle and destination square are drawn using color gradients so that the pixels
have a range of transparencies.
You may find that it is not so easy to understand the compositing operations when used
with translucent pixels like these. If you are interested in a deeper understanding, the
reference page for 
CanvasRenderingContext2D
includes the equations that specify how
individual pixel values are computed from source and destination pixels for each of the
11 compositing operations.
At the time of this writing, browser vendors disagree on the implementation of 5 of the
11 compositing modes: “copy”, “source-in”, “source-out”, “destination-atop”, and
“destination-in” behave differently in different browsers and cannot be used portably.
A detailed explanation follows, but you can skip to the next section if you don’t plan
on using any of these compositing operations.
658 | Chapter 21: Scripted Media and Graphics
Figure 21-17. Compositing operations with soft transparency
The five compositing modes listed above either ignore the destination pixel values in
the computation of result pixels or make the result transparent anywhere the source is
transparent. The difference in implementation has to do with the definition of the
source pixels. Safari and Chrome perform compositing “locally”: only the pixels ac-
tually drawn by the 
fill()
stroke()
, or other drawing operation count as part of the
source. IE9 is likely to follow suit. Firefox and Opera perform compositing “globally”:
every pixel within the current clipping region is composited for every drawing opera-
tion. If the source does not set that pixel, it is treated as transparent black. In Firefox
and Opera, this means that the five compositing modes listed above actually erase
destination pixels outside of the source and inside the clipping region. Figures 21-16
and 21-17 were generated in Firefox, and this is why the boxes around “copy”, “source-
in”, “source-out”, “destination-atop”, and “destination-in” are thinner than the other
boxes: the rectangle around each sample is the clipping region and these four compo-
siting operations erase the portion of the stroke (half of the 
lineWidth
) that falls inside
the path. For comparison, Figure 21-18 shows the same figure as Figure 21-17, but
generated in Chrome.
21.4  Graphics in a <canvas> | 659
Client-Side
JavaScript
Figure 21-18. Compositing locally rather than globally
The HTML5 draft current at the time of this writing specifies the global compositing
approach implemented by Firefox and Opera. Browser vendors are aware of the in-
compatibility and are not satisfied with the current state of the specification. There is
a distinct possibility that the specification will be altered to require local compositing
instead of global compositing.
Finally, note that it is possible to perform global compositing in browsers like Safari
and Chrome that implement local compositing. First, create a blank offscreen canvas
of the same dimensions as the on-screen canvas. Then draw your source pixels into the
offscreen canvas and use 
drawImage()
to copy the offscreen pixels to the on-screen
canvas and composite them globally within the clipping region. There is not a general
technique for performing local compositing in browsers like Firefox that implement
global compositing, but you can often come close by defining an appropriate clipping
region before performing the drawing operation that is to be locally composited.
660 | Chapter 21: Scripted Media and Graphics
21.4.14  Pixel Manipulation
The 
getImageData()
method returns an ImageData object that represents the raw (non-
premultiplied) pixels (as R, G, B, and A components) from a rectangular region of your
canvas. You can create empty blank 
ImageData
objects with 
createImageData()
. The
pixels in an ImageData object are writable, so you can set them any way you want, and
then copy those pixels back onto the canvas with 
putImageData()
.
These pixel manipulation methods provide very low-level access to the canvas. The
rectangle you pass to 
getImageData()
is in the default coordinate system: its dimensions
are measured in CSS pixels and it is not affected by the current transformation. When
you call 
putImageData()
, the position you specify is also measured in the default coor-
dinate system. Furthermore, 
putImageData()
ignores all graphics attributes. It does not
perform any compositing, it does not multiply pixels by 
globalAlpha
, and it does not
draw shadows.
Pixel manipulation methods are useful for implementing image processing. Exam-
ple 21-10 shows how to create a simple motion blur or “smear” effect on the graphics
in a canvas. The example demonstrates 
getImageData()
and 
putImageData()
and shows
how to iterate through and modify the pixel values in an ImageData object, but it does
not explain these things in any detail. See the CanvasRenderingContext2D reference
pages for complete details on 
getImageData()
and 
putImageData()
and see the Image-
Data reference page for details on that object.
Example 21-10. Motion blur with ImageData
// Smear the pixels of the rectangle to the right, producing a
// sort of motion blur as if objects are moving from right to left.
// n must be 2 or larger. Larger values produce bigger smears.
// The rectangle is specified in the default coordinate system.
function smear(c, n, x, y, w, h) {
// Get the ImageData object that represents the rectangle of pixels to smear
var pixels = c.getImageData(x,y,w,h);
// This smear is done in-place and requires only the source ImageData.
// Some image processing algorithms require an additional ImageData to
// store transformed pixel values. If we needed an output buffer, we could
// create a new ImageData with the same dimensions like this:
//   var output_pixels = c.createImageData(pixels);
// These dimensions may be different than w and h arguments: there may be
// more than one device pixel per CSS pixel.
var width = pixels.width, height = pixels.height;
// This is the byte array that holds the raw pixel data, left-to-right and
// top-to-bottom. Each pixel occupies 4 consecutive bytes in R,G,B,A order.
var data = pixels.data;
// Each pixel after the first in each row is smeared by replacing it with
// 1/nth of its own value plus m/nths of the previous pixel's value
var m = n-1;
21.4  Graphics in a <canvas> | 661
Client-Side
JavaScript
for(var row = 0; row < height; row++) {  // For each row
var i = row*width*4 + 4;  // The offset of the second pixel of the row
for(var col = 1; col < width; col++, i += 4) { // For each column
data[i] =   (data[i] + data[i-4]*m)/n;     // Red pixel component
data[i+1] = (data[i+1] + data[i-3]*m)/n;   // Green
data[i+2] = (data[i+2] + data[i-2]*m)/n;   // Blue
data[i+3] = (data[i+3] + data[i-1]*m)/n;   // Alpha component
}
}
// Now copy the smeared image data back to the same position on the canvas
c.putImageData(pixels, x, y);
}
Note that 
getImageData()
is subject to the same cross-origin security restriction that
the 
toDataURL()
is: it does not work on any canvas that has ever had an image drawn
in it (directly by 
drawImage()
or indirectly through a CanvasPattern) that has a different
origin than the document that contains the canvas.
21.4.15  Hit Detection
The method 
isPointInPath()
determines whether a specified point falls within (or on
the boundary of) the current path and returns 
true
if so, or 
false
otherwise. The point
you pass to the method is in the default coordinate system and is not transformed. This
makes this method useful for hit detection: determining whether a mouse click occurred
over a particular shape.
You can’t pass the 
clientX
and 
clientY
fields of a MouseEvent object directly to
isPointInPath()
, however. First, the mouse event coordinates must be translated to be
relative to the canvas element rather than the Window object. Second, if the onscreen
size of the canvas is different than its actual dimensions, the mouse event coordinates
must be scaled appropriately. Example 21-11 shows a utility function you can use to
determine whether a give MouseEvent was over the current path.
Example 21-11. Testing whether a mouse event is over the current path
// Returns true if the specified mouse event is over the current path
// in the specified CanvasRenderingContext2D object.
function hitpath(context, event) {
// Get <canvas> element from the context object
var canvas = context.canvas;              
// Get canvas size and position
var bb = canvas.getBoundingClientRect();  
// Translate and scale mouse event coordinates to canvas coordinates
var x = (event.clientX-bb.left)*(canvas.width/bb.width);
var y = (event.clientY-bb.top)*(canvas.height/bb.height);
// Call isPointInPath with these transformed coordinates
return context.isPointInPath(x,y);
}
662 | Chapter 21: Scripted Media and Graphics
Documents you may be interested
Documents you may be interested