c# pdf viewer open source : Add bookmark pdf file application SDK tool html .net azure online DevPro%20HTML5%20PDF14-part1489

ctx.fillStyle = ‘Navy’; 
ctx.fill(); 
//Draw lines 
ctx.beginPath(); 
ctx.moveTo(100, 400); 
ctx.lineTo(50, 500); 
ctx.lineTo(150, 500); 
ctx.lineTo(100, 400); 
ctx.strokeStyle = ‘Red’; 
ctx.lineWidth = 3; 
ctx.stroke(); 
ctx.fillStyle = ‘Yellow’; 
ctx.fill(); 
}; 
</script> 
</head> 
<body> 
<canvas id=”canvas” width=”800” height=”600”></canvas> 
</body> 
</html>
There are certainly other types of shapes you can draw with the canvas, including Bézier and qua-
dratic curves. They’re useful when you need to draw nonstandard shapes or add rounded corners to 
something like a rectangle. The Mozilla canvas documentation provides an example of using lines and 
quadatric curves to render a rectangle with rounded corners (see Figure 8).
Figure 8: Drawing a rectangle with rounded corners
function roundedRect(ctx, x, y, width, height, radius) { 
ctx.beginPath(); 
ctx.moveTo(x, y + radius); 
ctx.lineTo(x, y + height - radius); 
ctx.quadraticCurveTo(x, y + height, x + radius, y + height); 
ctx.lineTo(x + width - radius, y + height); 
ctx.quadraticCurveTo(x + width, y + height, x + width,  
y + height - radius); 
ctx.lineTo(x + width, y + radius); 
ctx.quadraticCurveTo(x + width, y, x + width - radius, y); 
ctx.lineTo(x + radius, y); 
ctx.quadraticCurveTo(x, y, x, y + radius); 
ctx.strokeStyle = ‘Black’; 
ctx.lineWidth = 10; 
ctx.stroke(); 
ctx.fillStyle = ‘Lime’; 
ctx.fill(); 
}
136
Chapter 15: Using the HTML5 Canvas Tag 
Add bookmark pdf file - add, remove, update PDF bookmarks in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your C# Project with Rapid PDF Internal Navigation Via Bookmark and Outline
how to bookmark a pdf in reader; bookmark page in pdf
Add bookmark pdf file - VB.NET PDF bookmark library: add, remove, update PDF bookmarks in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Empower Your VB.NET Project with Rapid PDF Internal Navigation Via Bookmark and Outline
edit pdf bookmarks; pdf bookmark editor
The roundedRect() function can be called as shown next and will render the rectangle shown in 
Figure 9.
Figure 9: Using lineTo() and quadraticCurveTo() to draw a rounded rectangle
roundedRect(ctx, 250, 5, 150, 150, 15);
The final topic that I’ll cover is text rendering. Although rendering shapes can be good for charts and 
a variety of other tasks, at some point you’ll want to render text to a canvas. Fortunately, that’s an easy 
proposition and something that’s also quite flexible since the canvas supports different types of trans-
forms as well (e.g., scaling and rotating objects). To render text to the canvas, you can use the fillText() 
method, which accepts the text to add as well as the x and y coordinates of where to add it. Here’s an 
example of using fillText():
ctx.fillStyle = ‘Black’; 
ctx.font = ‘30pt Arial’; 
ctx.fillText(‘Drawing with the Canvas’, 0, 550);
Canvas Tools—and More to Come
Although I’ve only scratched the surface of what can be done with the canvas, at this point you can 
see that using it to perform basic drawing functions is pretty straightforward (and much like GDI+ if 
you’ve worked with that). Using the canvas definitely involves a fair amount of JavaScript, though. You 
may wonder (as I did) if there isn’t an easier way to render shapes, especially given that you have to 
figure out the coordinates yourself. Although the tooling story for the canvas isn’t great quite yet, there 
are plug-ins for tools such as Adobe Illustrator that can be used to export shapes and even anima-
tions to JavaScript. One example is Ai->Canvas. A project that provides a library of shapes and other 
samples for the canvas can be found at code.google.com/p/html5-canvas-graphics/. And several open 
source script libraries such as Flot are available as well.
In future articles I’ll provide additional examples of using the canvas to generate more useful graphics 
that can be displayed in a web application. Figure 10 shows an example of the types of topics that I’ll 
cover to help teach canvas features.
Chapter 15: Using the HTML5 Canvas Tag  
137
C# PDF Password Library: add, remove, edit PDF file password in C#
This example shows how to add PDF file password with access permission setting. passwordSetting.IsAssemble = true; // Add password to PDF file.
creating bookmarks in a pdf document; how to add bookmarks to pdf files
VB.NET PDF File Split Library: Split, seperate PDF into multiple
Split PDF document by PDF bookmark and outlines in VB.NET. VB.NET PDF Splitting & Disassembling DLLs. Add necessary references: RasterEdge.Imaging.Basic.dll.
bookmarks in pdf from word; adding bookmarks in pdf
Figure 10: Building a chart using the HTML5 canvas
Until then, enjoy trying out your newfound HTML5 knowledge!
138
Chapter 15: Using the HTML5 Canvas Tag 
VB.NET PDF insert image library: insert images into PDF in vb.net
using RasterEdge.XDoc.PDF; Have a try with this sample VB.NET code to add an image to the first page of PDF file. ' Open a document.
create bookmarks in pdf; create bookmarks in pdf reader
VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Also able to uncompress PDF file in VB.NET programs. Offer flexible and royalty-free developing library license for VB.NET programmers to compress PDF file.
create bookmarks pdf file; pdf bookmarks
Chapter 16:  
HTML5 Tutorial: Build a Chart  
with JavaScript and the HTML5 Canvas
Learn how to use HTML5 to build charting features 
such as lines, shapes, and gradients into your web applications
By Dan Wahlin
Download the code: http://www.devproconnections.com/content/content/139802/139802_Canvas-
Demos.zip
The HTML5 canvas is capable of rendering lines, shapes, images, text, and more without relying on a 
plug-in. Although the canvas element isn’t supported by older browsers, the latest version of all major 
browsers (Internet Explorer, Safari, Chrome, Firefox, and Opera) now support the canvas, making it an 
option for rendering charts, graphs, and other types of visual data. In cases where a browser doesn’t 
support the canvas, a fallback can be provided that renders data using Silverlight, Flash, or another 
type of plug-in.
In Chapter 14, I walked through the fundamentals of using the HTML5 canvas to render different 
types of shapes. In this article I’ll discuss how the canvas can be used to render a line chart using 
JavaScript. An example of the chart that will be discussed is shown in Figure 1.
Figure 1: Building a chart using the HTML5 Canvas
To render the chart, a JavaScript object named CanvasChart was created that handles rendering all the 
lines, shapes, and text shown in Figure 1. Figure 2 shows an example of defining CanvasChart settings 
and calling the CanvasChart’s render() function.
Chapter 16:  HTML5 Tutorial: Build a Chart  with JavaScript and the HTML5 Canvas 
139
C# PDF File Compress Library: Compress reduce PDF size in C#.net
All object data. File attachment. Flatten visible layers. C#.NET DLLs: Compress PDF Document. Add necessary references: RasterEdge.Imaging.Basic.dll.
auto bookmark pdf; add bookmarks to pdf
C# PDF File Merge Library: Merge, append PDF files in C#.net, ASP.
Add necessary references: using RasterEdge.XDoc.PDF; Note: When you get the error "Could not load file or assembly 'RasterEdge.Imaging.Basic' or any other
bookmark pdf acrobat; excel print to pdf with bookmarks
Figure 2: Using a CanvasChart JavaScript object to render a chart using the HTML5 canvas
<!DOCTYPE html> 
<html> 
<head> 
<title>Canvas Chart Demo</title> 
<script src=”Scripts/jquery-1.6.min.js” type=”text/javascript”></script> 
<script src=”Scripts/canvasChart.js” type=”text/javascript”></script> 
<script type=”text/javascript”> 
$(document).ready(function () { 
var dataDef = { title: “US Population Chart”, 
xLabel: ‘Year’, 
yLabel: ‘Population (millions)’, 
labelFont: ‘19pt Arial’, 
dataPointFont: ‘10pt Arial’, 
renderTypes: [CanvasChart.renderType.lines, 
CanvasChart.renderType.points], 
dataPoints: [{ x: ‘1790’, y: 3.9 }, 
{ x: ‘1810’, y: 7.2 }, 
{ x: ‘1830’, y: 12.8 }, 
{ x: ‘1850’, y: 23.1 }, 
{ x: ‘1870’, y: 36.5 }, 
{ x: ‘1890’, y: 62.9 }, 
{ x: ‘1910’, y: 92.2 }, 
{ x: ‘1930’, y: 123.2 }, 
{ x: ‘1950’, y: 151.3 }, 
{ x: ‘1970’, y: 203.2 }, 
{ x: ‘1990’, y: 248.7 }, 
{ x: ‘2010’, y: 308.7}] 
}; 
CanvasChart.render(‘canvas’, dataDef); 
});
</script> 
< /head> 
<body style=”margin-left:50px;margin-top:50px;”> 
<canvas id=”canvas” width=”800” height=”600”></canvas> 
</body> 
</html>
The render() function accepts the canvas element ID as well as a JSON object that defines chart prop-
erties and data to be used in the rendering process.
The CanvasChart object demonstrates several key features of the canvas element that can be used in 
applications, including rendering lines, shapes, gradients, text, and even transformed text. Let’s take a 
look at how the CanvasChart object was created.
140
Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas  
C# PDF File Split Library: Split, seperate PDF into multiple files
Split PDF document by PDF bookmark and outlines. Add necessary references: RasterEdge.Imaging.Basic.dll. Split PDF file by number of pages.
add bookmarks to pdf preview; bookmark a pdf file
VB.NET PDF File Merge Library: Merge, append PDF files in vb.net
by directly tagging the second PDF file to the target one, this PDF file merge function VB.NET Project: DLLs for Merging PDF Documents. Add necessary references
copy bookmarks from one pdf to another; bookmark template pdf
Rendering Gradients and Text
The code for the CanvasChart object is located in a file named canvasChart.js that’s available with 
this article’s downloadable code. The code starts by defining a CanvasChart object that exposes two 
members named renderType and render. renderType is used to define what will be rendered on the 
chart (currently it supports rendering lines and points), while render() is used to render the data on the 
canvas as well as the associated labels for the x and y axes. The skeleton code for CanvasObject is 
shown in Figure 3.
Figure 3: The skeleton structure of the CanvasChart object
var CanvasChart = function () { 
var ctx, 
margin = { top: 40, left: 75, right: 0, bottom: 75 }, 
chartHeight, chartWidth, yMax, xMax, data, 
maxYValue = 0, 
ratio = 0, 
renderType = { lines: ‘lines’, points: ‘points’ };
//functions go here
return { 
renderType: renderType, 
render: render 
}; 
} ();
The code follows a JavaScript pattern referred to as the “revealing module pattern,” which provides a 
convenient way to write objects that expose specific members only to outside callers. This example 
exposes the renderType variable and render function.
The render() function shown in Figure 4 accepts the canvas ID defined within the page (see Figure 2) 
as well as a JSON object that defines details about labels, font sizes, data points, and more that are 
used for charting.
Figure 4: The render function, which is exposed to the client and used to trigger different canvas-
rendering processes
var render = function(canvasId, dataObj) { 
data = dataObj; 
getMaxDataYValue(); 
var canvas = document.getElementById(canvasId); 
chartHeight = canvas.getAttribute(‘height’); 
chartWidth = canvas.getAttribute(‘width’); 
xMax = chartWidth - (margin.left + margin.right); 
yMax = chartHeight - (margin.top + margin.bottom); 
ratio = yMax / maxYValue; 
ctx = canvas.getContext(“2d”); 
Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas   
141
renderChart(); 
};
The render function starts by assigning the dataObj parameter to a variable within the CanvasChart 
object, then calls an internal function named getMaxDataYValue(). The getMaxDataYValue() function 
determines the maximum Y value for the data points. From there, the render() function locates the 
target canvas element within the page, calculates width and height values, and accesses the canvas’s 
2D context that will be used to draw. Finally, a call is made to renderChart() to start the rendering 
process.
The renderChart() function (see Figure 5) orchestrates different drawing functions and handles ren-
dering the background, lines, labels, and data by calling the respective functions.
Figure 5: The renderChart function, which handles rendering a background gradient, text, lines, and 
labels along the X and Y axes
var renderChart = function () { 
renderBackground(); 
renderText(); 
renderLinesAndLabels(); 
//render data based upon type of renderType(s) that client supplies 
if (data.renderTypes == undefined || data.renderTypes == null)  
data.renderTypes = [renderType.lines]; 
for (var i = 0; i < data.renderTypes.length; i++) { 
renderData(data.renderTypes[i]); 
};
Different canvas features are used in the CanvasChart object, such as gradients and transforms. For 
example, the renderBackground() function shown in Figure 6 demonstrates how linear gradients can 
be created. The renderBackground() function uses the 2D context’s createLinearGradient() function to 
define a gradient that has four gradient stops. Once the gradient is defined, it is assigned to the fill-
Style property, then rendered to a rectangular area using the fillRect() function.
Figure 6: The renderBackground function showing how gradients can be rendered within a canvas 
using the createLinearGradient function
var renderBackground = function() { 
var lingrad = ctx.createLinearGradient(margin.left, margin.top,  
xMax - margin.right, yMax); 
lingrad.addColorStop(0.0, ‘#D4D4D4’); 
lingrad.addColorStop(0.2, ‘#fff’); 
lingrad.addColorStop(0.8, ‘#fff’); 
lingrad.addColorStop(1, ‘#D4D4D4’); 
ctx.fillStyle = lingrad; 
ctx.fillRect(margin.left, margin.top, xMax - margin.left,  
yMax - margin.top); 
ctx.fillStyle = ‘black’; 
};
142
Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas  
CanvasChart also demonstrates how text can be manipulated using transforms. The text displayed on 
the Y axis is rotated so that it displays vertically, as shown in Figure 7.
Figure 7: Using the canvas to rotate text vertically
Text rotation is accomplished by using the canvas element’s rotate transform functionality, which is 
found in the renderText() function shown in Figure 8. The key section of this code is the call to ctx.
save() (toward the bottom of the function shown in Figure 8), which saves the current state of the 
canvas so that it can be restored. This is necessary so that the entire canvas isn’t rotated. Once the cur-
rent canvas state is saved, a call to the rotate() function is made to rotate the canvas. The text is then 
drawn for the vertical axis using the fillText() function. Once the rotated text is rendered, the canvas 
is restored back to its saved state—the state before the rotate transform was applied and the text was 
rendered.
Figure 8: Rotating text vertically using the canvas’s rotate function
var renderText = function() { 
var labelFont = (data.labelFont != null) ? data.labelFont : ‘20pt Arial’; 
ctx.font = labelFont; 
ctx.textAlign = “center”;
//Title 
var txtSize = ctx.measureText(data.title); 
ctx.fillText(data.title, (chartWidth / 2), (margin.top / 2));
//X-axis text 
txtSize = ctx.measureText(data.xLabel); 
ctx.fillText(data.xLabel, margin.left + (xMax / 2) - (txtSize.width / 2),  
yMax + (margin.bottom / 1.2));
//Y-axis text 
ctx.save(); 
ctx.rotate(-Math.PI / 2); 
ctx.font = labelFont; 
ctx.fillText(data.yLabel, (yMax / 2) * -1, margin.left / 4); 
ctx.restore(); 
};
Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas   
143
After the x and y axis text is rendered, the CanvasChart object makes a call to renderLinesAndLabels() 
(see Figure 9) to handle rendering the horizontal and vertical lines.
Figure 9: Rendering lines and labels using the canvas
var renderLinesAndLabels = function () { 
//Vertical guide lines 
var yInc = yMax / data.dataPoints.length; 
var yPos = 0; 
var yLabelInc = (maxYValue * ratio) / data.dataPoints.length; 
var xInc = getXInc(); 
var xPos = margin.left; 
for (var i = 0; i < data.dataPoints.length; i++) { 
yPos += (i == 0) ? margin.top : yInc; 
//Draw horizontal lines 
drawLine(margin.left, yPos, xMax, yPos, ‘#E8E8E8’);
//y axis labels 
ctx.font = (data.dataPointFont != null) ? data.dataPointFont :  
‘10pt Calibri’; 
var txt = Math.round(maxYValue - ((i == 0) ? 0 : yPos / ratio)); 
var txtSize = ctx.measureText(txt); 
ctx.fillText(txt, margin.left - ((txtSize.width >= 14) ?  
txtSize.width : 10) - 7, yPos + 4);
//x axis labels 
txt = data.dataPoints[i].x; 
txtSize = ctx.measureText(txt); 
ctx.fillText(txt, xPos, yMax + (margin.bottom / 3)); 
xPos += xInc; 
}
//Vertical line 
drawLine(margin.left, margin.top, margin.left, yMax, ‘black’);
//Horizontal Line 
drawLine(margin.left, yMax, xMax, yMax, ‘black’); 
};
Lines are normally drawn using the 2D context’s moveTo() and lineTo() functions, which are wrapped 
in a function named drawLine() to simplify the process. Figure 10 shows the drawLine function. At this 
point the canvas looks like the image shown in Figure 11.
Figure 10: Wrapping canvas functionality for drawing lines into a function named drawLine
var drawLine = function(startX, startY, endX, endY, strokeStyle, lineWidth) { 
if (strokeStyle != null) ctx.strokeStyle = strokeStyle; 
144
Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas  
if (lineWidth != null) ctx.lineWidth = lineWidth; 
ctx.beginPath(); 
ctx.moveTo(startX, startY); 
ctx.lineTo(endX, endY); 
ctx.stroke(); 
ctx.closePath(); 
};
Figure 11: Rendering the background, lines, text, and axes text components  
of a chart using the HTML5 canvas
Rendering Data
Once the labels and lines are rendered, CanvasChart handles rendering the data points by calling 
a function named renderData(). This function handles iterating through the JSON data points and 
drawing lines, points, or both depending upon the settings passed to CanvasChart’s render() function. 
Lines are drawn to connect the different data points through calls to the drawLine() function shown 
earlier in Figure 10, while circles are drawn for specific data points by making calls to the 2D con-
text’s arc() function. The circles that are rendered have a radial gradient applied to them using the cre-
ateRadialGradient() function. The complete renderData function is shown in Figure 12.
Figure 12: Chart data passed into the CanvasChart object in a JSON format
var renderData = function(type) { 
var xInc = getXInc(); 
var prevX = 0,  
prevY = 0;
for (var i = 0; i < data.dataPoints.length; i++) { 
var pt = data.dataPoints[i]; 
var ptY = (maxYValue - pt.y) * ratio; 
if (ptY < margin.top) ptY = margin.top; 
var ptX = (i * xInc) + margin.left;
if (i > 0 && type == renderType.lines) { 
//Draw connecting lines 
drawLine(ptX, ptY, prevX, prevY, ‘black’, 2); 
}
Chapter 16: HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas   
145
Documents you may be interested
Documents you may be interested