106
C
HAPTER
Using Canvas for web apps
6.2.1
Basic path commands
Table 6.1 lists the basic path commands. They’re divided into three broad types: cre-
ation commands that get you going, draw commands that either draw or move while 
you’re working on a path, and completion commands that are used when you’re fin-
ishing a path.
Listing 6.2 shows an example of how to use these commands to draw a simple banner. 
This is just the first step in putting together a Canvas application. Things will get more 
complex as we learn about additional methods.
var context = canvas.getContext('2d');  
context.beginPath();  
context.moveTo(10,110);  
context.lineTo(10,10);    
context.lineTo(40,40);
context.lineTo(70,10);
context.lineTo(70,110);
context.closePath();  
context.stroke();  
You start by repeating the 
getContext
line 
B
from the 
setup example. The context is important because it’s the 
object that gives you access to all of the drawing methods. 
For future examples, we’ll always assume that we have 
defined a context by the name of 
context
. After creating 
the context, you draw a path that defines an image, as 
shown in figure 6.2.
Any path must start off with a 
beginPath
line 
C
. This 
clears off the drawing stack and resets your virtual pencil to 
the origin point of 0,0. As a result, most Canvas methods 
Table 6.1 A variety of simple JavaScript commands help you create, draw, and finish basic Canvas paths
Method
Type
Variables
Summary
beginPath Creation method
Starts a new path
lineTo
Draw method
x,y
Moves the virtual pencil visibly
moveTo
Draw method
x,y
Moves the virtual pencil invisibly
closePath Draw method
Completes a path by drawing back to the first point
fill
Completion method
Draws a path by filling in the space between  
visible lines
stroke
Completion method
Draws a path by just drawing the visible lines
Listing 6.2 Simple Canvas commands draw quick two-dimensional shapes
B
C
D
E
F
G
Figure 6.2 This simple 
banner was drawn with 
eight path commands.
Licensed to Nick Wood <nwood888@yahoo.com>
Change pdf to jpg file - Convert PDF to JPEG images in C#.net, ASP.NET MVC, WinForms, WPF project
How to convert PDF to JPEG using C#.NET PDF to JPEG conversion / converter library control SDK
convert pdf into jpg; convert pdf pictures to jpg
Change pdf to jpg file - VB.NET PDF Convert to Jpeg SDK: Convert PDF to JPEG images in vb.net, ASP.NET MVC, WinForms, WPF project
Online Tutorial for PDF to JPEG (JPG) Conversion in VB.NET Image Application
pdf to jpeg; best way to convert pdf to jpg
107
Drawing paths
will follow the 
beginPath
with a 
moveTo
D
, to get the virtual pencil to where you want 
to start drawing without actually drawing anything in between. 
For this example, you next use a set of four 
lineTo
methods 
E
to draw an M-
shape. Because these are lines, they’ll display when you complete your path. 
The 
closePath
F
that ends the drawing is entirely optional. It’s really just a short-
hand way to draw a line between the final point that you explicitly designated and the 
point that you began drawing at.
But none of this appears on the screen until you use a completion method 
G
. You 
can use 
stroke
, as in this example, to just draw the line, or alternatively you can use 
fill
, to color everything in. Note that when you use a 
fill
command, you don’t need 
closePath
command; instead, Canvas will automatically close your shape for you.
6.2.2
Curve commands
Once you’ve learned about lines, you’ve just got one other fundamental drawing tool 
in Canvas: the curve. Three different curve commands are available to you: the arc 
(which is available through two different methods), the quadratic curve, and the 
Bezier curve. These are summarized in table 6.2.
Each of these curves requires more explanation, because they work slightly differently 
and the two types of Bezier curves are somewhat complex.
THE ARC
arc
is a standard circle (or arc) command, and it is the easiest curve method to use. 
But you need to be slightly careful in its use for two reasons.
First, it steps outside the standard paradigm for the drawing methods. Rather than 
explicitly defining the endpoints of your arc as data points on your grid, you instead 
define a center point, a radius, and the endpoints as angles. This makes drawing a cir-
cle pretty simple and intuitive, but it can cause problems if you’re drawing the arc as 
part of a stack of paths, in which case you must first move to where your arc will start 
to avoid leaving behind an unsightly path. 
Second, 
arc
defines everything in radians. If you don’t remember your high school 
geometry, 2π radians is a full circle, the same as 360 degrees. Odds are that you’ll be 
thinking of things in terms of degrees, in which case you’ll have to multiply everything 
by π/180 in order to convert. 
Table 6.2 Canvas supplies four methods for drawing curved paths.
Method
Type
Variables
Summary
arc
Draw method
x, y, radius, startangle, 
endangle, anticlockwise
Draws a circle or an arc of a circle
arcTo
Draw method
x1,y1,x2,y2,radius
Draws an arc from point to point
quadraticCurveTo Draw method
cpx,cpy,x,y
Draws a quadratic Bezier curve
bezierCurveTo
Draw method
cpx1,cpy1,cpx2,cpy2,x,y Draws a cubic Bezier curve
Licensed to Nick Wood <nwood888@yahoo.com>
Online Convert Jpeg to PDF file. Best free online export Jpg image
You can drag and drop your JPG file in the box, and then start immediately to sort the files, try out some settings and then create the PDF files with the
.pdf to .jpg online; change pdf into jpg
Online Convert PDF to Jpeg images. Best free online PDF JPEG
Online PDF to JPEG Converter. Download Free Trial. Convert a PDF File to JPG. Drag and drop your PDF in the box above and we'll convert the files for you.
convert pdf to gif or jpg; convert pdf to jpg c#
108
C
HAPTER
Using Canvas for web apps
Of the variables only the last, anticlockwise, requires any additional explanation. 
It’s set to either true or false and defines the direction in which the circle is drawn 
from the start angle to the end angle. Why “anticlockwise” instead of “clockwise,” you 
ask? It’s another standard when using radians.
Once you’ve got these basics, you can draw a circle. The following example draws 
a 33 radius circle centered at 150,150:
context.beginPath();
context.arc(150,150,33,0,360*Math.PI/180,true);
context.fill();
You can also use the 
arc
command to draw, well, arcs. The follow example draws a 
center point and then two arcs around it:
context.beginPath();
context.arc(150,150,2,0,360*Math.PI/180,true);
context.fill();
context.beginPath();
context.arc(150,150,20,0,90*Math.PI/180,true);
context.moveTo(185,150);
context.arc(150,150,35,0,90*Math.PI/180,false);
context.stroke();
The results of this are shown in figure 6.3, which better 
shows off some of the functionality we’ve been talking 
about.
Both of the arcs in figure 6.3 center around 150,150 
with radiuses of 20 and 35 respectively. They both run 
from 0 degrees to 90 degrees, but the first one goes anti-
clockwise, resulting in three-quarters of a circle, while the 
second goes clockwise, resulting in one-quarter of a circle.
Simple calculation tells us that the first arc runs from 170,150 to 150,170 while the 
second runs from 185,150 to 150,185. If not for the 
moveTo
in between them, a 
straight line would have been drawn from 150,170 to 185,150 as part of the path that 
you’re drawing. If you’d like to test this out, just input the code, but leave out the 
moveTo
method.
THE ARCTO
Note that there is also a second command, 
arcTo
, which can be used to draw arcs 
from one point to another. It more closely matches the draw-to paradigm that you’ve 
used before, where you draw simple figures connecting one point to the next one.
THE BEZIER CURVES
The two Bezier curves also match this draw-to paradigm: your virtual pencil is on the 
canvas and you’re drawing to another point. But Bezier curves don’t necessarily draw 
very symmetric arcs.
That’s pretty much the definition of a Bezier curve. Each one has at least one con-
trol point, which defines how the curve changes—whether it’s steep or shallow, and 
over which parts of the curve. The quadratic Bezier curve (
quadraticCurveTo
) has 
Figure 6.3 Two simple arcs 
are drawn around a central dot.
Licensed to Nick Wood <nwood888@yahoo.com>
C# Image Convert: How to Convert Adobe PDF to Jpeg, Png, Bmp, &
C# sample code for PDF to jpg image conversion. This demo code convert PDF file all pages to jpg images. // Define input and output files path.
batch convert pdf to jpg; pdf to jpg converter
C# Image Convert: How to Convert Dicom Image File to Raster Images
RasterEdge.XDoc.Office.Inner.Office03.dll. RasterEdge.XDoc.PDF.dll. RasterEdge.XDoc. PowerPoint.dll. This demo code convert dicom file all pages to jpg images.
best program to convert pdf to jpg; change pdf to jpg online
109
Drawing paths
one control point that connects to both endpoints, and the cubic Bezier curve 
(
bezierCurveTo
) has two control points, one per endpoint. If you’ve ever worked with 
Adobe Illustrator, those lines that you drag off of the vertices of figures that you’ve 
drawn are control points that allow you to make Bezier curves.
Listing 6.3 shows the commands required to draw two Bezier curves. 
context.beginPath();
context.moveTo(20,200);
context.quadraticCurveTo(20,20,200,20)
context.moveTo(40,300);
context.bezierCurveTo(180,270,150,240,300,40);
context.stroke();
Figure 6.4 shows what the output of listing 6.3 looks like. To the left, we have it as it 
appears on the iPhone screen; to the right, we have a version with the control points 
and the endpoints drawn in for additional clarity.
We’ll offer one final caveat on these Bezier curves: they’re tricky to use. The qua-
dratic curve can be used for some nice rounded corners without too much trouble, 
but figuring out what the cubic curve will look like is entirely trial and error. If you’ve 
got a good drawing program that will let you accurately measure the positions of 
Bezier curves, you might want to use that as your whiteboard; otherwise you’ll need to 
keep inputting control points and seeing how they look on the screen.
Lines and curves may be good, but how can you use them to draw actual stuff? As it 
happens, Canvas has a very limited selection of more complex shapes that you can 
draw, forcing you to often fall back on your ingenuity. 
Listing 6.3 Bezier curves allow for smooth arcs between two points
Figure 6.4 The Bezier 
curves (left) were drawn 
using the depicted 
control points (right).
Licensed to Nick Wood <nwood888@yahoo.com>
C# TIFF: How to Use C#.NET Code to Compress TIFF Image File
C:\demo3.jpg" }; // Construct List<REImage> object. List<Bitmap> images = new List<Bitmap>(); / Step1: Load image to REImage object. foreach (string file in
change pdf file to jpg; change pdf to jpg file
C# Create PDF from images Library to convert Jpeg, png images to
Add(new Bitmap(Program.RootPath + "\\" 1.jpg")); images.Add 1.png")); / Build a PDF document with PDFDocument(images.ToArray()); / Save document to a file.
change from pdf to jpg; batch pdf to jpg online
110
C
HAPTER
Using Canvas for web apps
6.3
Drawing shapes
There is only one shape in the standard Canvas library, and that’s the rectangle. 
Beyond that, you can write your own functions to draw other shapes.
6.3.1
Drawing rectangles
You can draw rectangles in three different ways, two of which are closely related to the 
stroke and fill commands that we’ve already seen. These possibilities are all described 
in table 6.3.
These integrated methods take care of everything for you. There’s no need to sepa-
rately begin a path, then later draw it. Instead, everything is done in one easy method.
The following code would draw one square inside of another:
context.fillRect(100,100,150,150);
context.clearRect(125,125,100,100);
context.strokeRect(150,150,50,50);
Note that in each of these method calls, the x,y 
values define the top left of the rectangle, which is 
then drawn out from that location. The results are 
shown in figure 6.5.
We haven’t dwelled on it much so far, but shapes 
in Canvas are drawn one on top of another, in the 
order of invocation (or at least they are when you 
use the default composition method, a topic we’ll 
return to). Here, you drew a filled square (using the 
fillstyle
attribute of the context, which we’ll also 
cover in a minute), then cleared the space, and 
finally drew a stroked square atop it all.
Note that the 
clearRect
command effectively 
acts as an eraser for a rectangle of space. It’ll be useful when you’re drawing on top of 
other drawings, as you did here, or when you’re playing with animation down the line.
6.3.2
Writing shape functions
Unfortunately, the rectangle is the only shape that is directly built into Canvas. You 
can create a circle pretty simply using the 
arc
command, but from there you’re 
Table 6.3 Three rectangle commands allow simpler access to these shapes, without using paths.
Method
Type
Variables
Summary
clearRect
Integrated method
x,y,width,height
Clears the area
fillRect
Integrated method
x,y,width,height
Draws a filled rectangle
strokeRect
Integrated method
x,y,width,height
Draws a rectangle outline
Figure 6.5 A stack of three  
rectangles are drawn one atop another.
Licensed to Nick Wood <nwood888@yahoo.com>
VB.NET PDF Convert to Images SDK: Convert PDF to png, gif images
Convert PDF to Jpg, Png, Bmp, Gif, Tiff and Bitmap in GetPage(0) ' Convert the first PDF page to a BMP file. Or directly change PDF to Gif image file in VB.NET
convert pdf pages to jpg; convert pdf file into jpg format
C# WPF PDF Viewer SDK to convert and export PDF document to other
Files; Split PDF Document; Remove Password from PDF; Change PDF Permission Settings. file formats with high quality, support converting PDF to PNG, JPG, BMP and
changing file from pdf to jpg; batch convert pdf to jpg online
111
Drawing shapes
entirely on your own. If you’re planning to draw a lot of shapes in your Canvas pro-
gram, you’ll probably want to write your own shape functions. Because Canvas does all 
of its work through JavaScript, this is easy to do, as shown in listing 6.4.
function rhombus(context,x,y,length,angle,style) {
context.beginPath();
context.moveTo(x,y);
width = length * Math.sin(angle/2);
height = length * Math.cos(angle/2);
context.lineTo(x-width,y-height);
context.lineTo(x,y-2*height);
context.lineTo(x+width,y-height);
context.closePath();
if (style == 'fill') {
context.fill();
} else {
context.stroke();
}
}
Going back to high school geometry once more (and, to be frank, we had to look it up 
ourselves), a rhombus is a type of equilateral quadrangle, which is to say a four-sided 
polygon where all the sides are of equal length. 
We’ve decided to define our rhombuses by the bottom-most point (
x
,
y
), the size 
of the angle just above that point, in radians (
angle
), and the length of one of its 
sides (
length
). We’ve also included an option to fill or stroke the rhombus (
style
). 
Finally, with a bit of trigonometric magic (and, yes, we had to look that up too), we 
were able to draw a simplistic rhombus (with a very specific orientation) based on 
those properties.
Here’s how our rhombus function could be put to use:
rhombus(context,100,100,25,45*Math.PI/180,'fill');
rhombus(context,150,100,25,90*Math.PI/180,'stroke');
The results are shown in figure 6.6.
You’ll note that the unfilled rhombus is a 
rotated square, another shape function that you 
could write for Canvas. The exact shapes you’ll 
want to use in your graphical iPhone web apps 
will probably vary, but they should be as easy to 
program as this one. 
We’ve now completed our look at the basic 
line-drawing functionality in Canvas, so the 
next question is how to make those lines more 
attractive. 
Listing 6.4 An example of a rhombus function 
Figure 6.6 Our shape function allows 
for a variety of rhombuses to be drawn.
Licensed to Nick Wood <nwood888@yahoo.com>
112
C
HAPTER
Using Canvas for web apps
6.4
Creating styles: colors, gradients, and lines
Plain black lines aren’t going to cut it for an iPhone web app. Fortunately, in Canvas 
it’s easy to modify your simple lines and fills by applying styles and changing other 
variables.
6.4.1
Color styles
Separate styles can be used to modify the colors of fills and strokes. These properties 
are summarized in table 6.4.
Note that both 
fillStyle
and 
strokeStyle
affect the following fill (or stroke) 
commands. This means that the most recently input style will affect the entire path 
stack when it’s drawn. Earlier ones will be ignored, so if you want to have different 
shapes with different styles, you’ll need to clear the stack after each one with a fill or 
stroke command.
The actual color definition can be made via most 
CSS3
definitions. You can use rec-
ognized words, #
RGB
values, 
rgb
values, or even 
rgba
values. Here are four ways to set 
your fill style to red:
context.fillStyle = "#ff0000";
context.fillStyle = "red";
context.fillStyle = "rgb(255,0,0)";
context.fillStyle = "rgba(255,0,0,1)";
In the 
rgba
example, the last value is for alpha transparency, set between 0 and 1. If 
you decrease that value, you’ll make your upcoming fills or strokes partially transpar-
ent. You’ll also meet 
globalAlpha
, a global transparency variable, down the line. It’ll 
allow you to change the alpha transparency value of everything you’re drawing—but 
the 
rgba
command is more convenient for most usage (at least until you start saving 
and restoring states).
6.4.2
Gradient styles
Besides colors, you can also produce good-looking gradients in Canvas. These are of 
particular note because gradients are used throughout the iPhone’s user interface. 
Thus, using gradients will be a notable step toward creating an iPhone-like interface 
for your graphical web app. Table 6.5 lists the methods required to create gradients; 
we’ll then apply them to fill (and stroke) styles, just like we did with basic colors.
The 
createLinearGradient
and 
createRadialGradient
methods each define 
how your gradient will be drawn. With 
createLinearGradient
you’re defining a 
Table 6.4 By setting variables, you can choose how your fills and strokes look.
Property
Type
Value
Summary
fillStyle
Style variable
CSS3 Color
Sets subsequent fills to the color
strokeStyle
Style variable
CSS3 Color
Sets subsequent strokes to the color
Licensed to Nick Wood <nwood888@yahoo.com>
113
Creating styles: colors, gradients, and lines
simple vector. The x1,y1 point is the start of your gradient (the 0 point for color stops, 
which we’ll get to momentarily) and the x2,y2 point is the end of your gradient (the 1 
point). The 
createRadialGradient
method creates a slightly more complex two-
dimensional array of vectors. The circle defined by x1,y1,r1 defines the start of your 
gradient (0), and the x2,y2,r2 points defines its end (1). Because of this complex defi-
nition of radial gradients, you can do something that you can’t do in most drawing 
programs: define an asymmetrical gradient.
Once you’ve got your gradient defined, you can then add color stops to it with 
the gradient’s 
addColorStop
method. Color stops are defined on your gradient 
between 0 and 1, which are the two endpoints we already met. Like other styles, they 
use 
CSS3
colors.
Listing 6.5 shows how a linear gradient is created and then applied to the rhombus 
function we created earlier; radial gradients are formed similarly.
var gradient = context.createLinearGradient(0,100,0,300);  
gradient.addColorStop(0,'rgba(255,0,0,0)');  
gradient.addColorStop(1,'rgba(255,0,0,1)');
context.fillStyle = gradient;  
rhombus(context,200,200,50,Math.PI/3,'fill');  
When you create a new gradient, you assign its value to a variable 
B
. This variable 
comes with the 
addColorStop
method, the first method we’ve met that doesn’t derive 
from Canvas’s context object. You can use that method to 
assign as many color steps as you want, though here we’ve 
got the minimalist case of just two 
C
This example uses an 
rgba
method to define its colors, 
to allow for a nice fadeout, but as we’ve noted before, you 
can use any 
CSS3
color definition. A gradient from one 
color to a distinct color would work just the same.
You finally apply the gradient to a fill style 
D
, and then 
draw 
E
using that style. All upcoming draw commands will 
use the same gradient until you change it out for something 
else. The results are shown in figure 6.7.
Table 6.5 Fill and stroke styles can include intricate gradients created by a suite of special gradient 
methods.
Method
Type
Variables
Summary
createLinearGradient Style creation method
x1,y1,x2,y2
Creates a linear  
gradient’s vector
createRadialGradient Style creation method
x1,y1,r1,x2,y2,r2
Creates a radial  
gradient’s vectors
addColorStop
Style creation method
position,color
Adds a color to a gradient
Listing 6.5 Instead of a color, you can apply a gradient as a style
B
C
D
E
Figure 6.7 Gradients allow 
for attractive coloring.
Licensed to Nick Wood <nwood888@yahoo.com>
114
C
HAPTER
Using Canvas for web apps
6.4.3
Line styles
Before we finish our look at how to modify lines and fills, we’re going to look at one 
last thing: line styles. These additional variables can be used to really define how your 
lines look. You probably won’t use these nearly as much as colors and gradients, but 
we nonetheless list them in table 6.6 for the sake of completeness.
These values are all properties of the Canvas context and can be set accordingly:
context.lineCap = 'round';
Of the four variables, 
lineCap
and 
lineJoin
will be used pretty infrequently and 
miterLimit
even less so. Most of the time, you’ll be happy with the defaults—butt for 
lineCap
, miter for 
lineJoin
, and no miter limit. But 
lineWidth
is of more relevance. 
This is the value that most drawing programs call the stroke width. It’s initially set to a 
unit of 1 pixel, and if you need thicker lines, this is the value to change.
There’s still a bit more that you can do to modify your shapes and lines: you can 
choose not to show some of them. 
6.5
Modifying composition and clipping
You can make your shapes and lines partially invisible three ways: by turning on alpha 
transparency, by changing the composition method, and by creating clipping paths. 
These possibilities are summarized in table 6.7.
The global variables are the simplest—but least precise—ways of controlling 
shapes. Clipping paths use the path functionality that you’ve already learned to define 
exactly how your shapes are drawn.
Table 6.6 You can get really picky about how your lines look by modifying their styles with a final set of 
variables.
Property
Type
Value
Summary
lineCap
Style variable
butt,round,square
Defines what the end of a line looks like
lineJoin
Style variable
bevel,round,miter
Defines how two lines come together
miterLimit Style variable
(number)
Defines the upper limit of when to use a miter 
join; above that, a bevel join is used instead
lineWidth
Style variable
(number)
Defines the width of a line’s stroke
Table 6.7 Two global properties and one method can be used to adjust precisely how your shapes are 
drawn.
Method or property
Type
Value
Summary
globalAlpha
Global variable
0 to 1
Sets transparency
globalCompositeOperation
Global variable
(numerous)
Sets composite method
clip
Completion method
Creates clipping path
Licensed to Nick Wood <nwood888@yahoo.com>
115
Modifying composition and clipping
6.5.1
Global variables
As the names 
globalAlpha
and 
globalCompositeOperation
suggest, each of them is a 
global variable that modifies everything you draw. 
globalAlpha
sets the transparency level of everything that follows it from fully 
transparent (0) to fully opaque (1). The default value is 1:
context.globalAlpha = .1;
globalCompositeOperation
defines what happens when shapes are drawn one on top 
of each other. The default value is 
source-over
, which means that newer shapes are 
drawn on top of older shapes, as we saw when we were drawing rectangles (in figure 6.5), 
and its opposite is 
destination-over
. But a variety of more interesting operations may 
be used to exclude, combine, or otherwise change the way overlapping shapes are com-
posited. Table 6.8 describes these possibilities.
Just as with 
globalAlpha
, all you need to do is set the property to make the 
change:
context.globalCompositeOperation = "darker";
Table 6.8 The globalCompositeOperation property changes what happens when you draw 
shapes on top of each other.
Value
Type
Summary
source-over
Stacking choice
New shapes are drawn on top of existing content.
destination-over
Stacking choice
New shapes are drawn behind existing content.
copy
New dominant
Only the new shape is drawn.
source-in
New dominant
Only the new shape is drawn, and only where the two 
overlap.
source-out
New dominant
Only the new shape is drawn, and only where the two 
don’t overlap.
destination-atop
New dominant
The new shape is fully drawn, and the old shape is only 
drawn where they overlap.
destination-in
Old dominant
Only the existing content is drawn, and only where the two 
overlap.
destination-out
Old dominant
Only the existing content is drawn, and only where the two 
don’t overlap.
source-atop
Old dominant
The existing content is fully drawn, and the new shape is 
only drawn where they overlap.
lighter
Blending choice
Where the shapes overlap, the color value is added.
darker
Blending choice
Where the shapes overlap, the color value is subtracted.
xor
Blending choice
Where the shapes overlap, nothing is drawn.
Licensed to Nick Wood <nwood888@yahoo.com>
Documents you may be interested
Documents you may be interested