112
Filling a path does not clear the path. You can call
stroke()
after calling
fill()
without
redefining the path.
When the path intersects itself or when subpaths overlap,
fill()
canvas uses the nonzero
winding rule to determine which points are inside the path and which are outside. This means,
for example, that if your path defines a square inside of a circle and the square’s subpath winds
in the opposite direction of the circle’s path, the interior of the square will be outside of the
path and will not be filled.
void fillRect(double x, y, width, height)
fillRect()
fills the specified rectangle with the color, gradient, or pattern specified by the
fillStyle
property.
Unlike the
rect()
method,
fillRect()
has no effect on the current point or the current path.
void fillText(string text, double x, y, [double maxWidth])
fillText()
draws
text
using the current
font
and
fillStyle
properties. The
x
and
y
arguments
specify where on the canvas the text should be drawn, but the interpretation of these argu-
ments depends on the
textAlign
and
textBaseline
properties, respectively.
If
textAlign
is
left
or is
start
(the default) for a canvas that uses left-to-right text (also the
default) or
end
for a canvas that uses right-to-left text, the text is drawn to the right of the
specified X coordinate. If
textAlign
is
center
, the text is horizontally centered around the
specified X coordinate. Otherwise (if
textAlign
is “right”, is “end” for left-to-right text, or is
“start” for right-to-left text), the text is drawn to the left of the specified X coordinate.
If
textBaseline
is “alphabetic” (the default), “bottom”, or “ideographic”, most of the glyphs
will appear above the specified Y coordinate. If
textBaseline
is “center”, the text will be
approximately vertically centered on the specified Y coordinate. And if
textBaseline
is “top”
or “hanging”, most of the glyphs will appear below the specified Y coordinate.
The optional
maxwidth
argument specifies a maximum width for the text. If the
text
would
be wider than
maxWidth
, the text will be drawn using a smaller or more condensed version of
the font instead.
ImageData getImageData(double sx, sy, sw, sh)
The arguments to this method are untransformed coordinates that specify a rectangular region
of the canvas. The method copies the pixel data from that region of the canvas into a new
ImageData object and returns that object. See
ImageData
for an explanation of how to access
the red, green, blue, and alpha components of the individual pixels.
The RGB color components of the returned pixels are not premultiplied by the alpha value.
If any portions of the requested rectangle lie outside the bounds of the canvas, the associated
pixels in the ImageData are set to transparent black (all zeros). If the implementation uses
more than one device pixel per CSS pixel, the
width
and
height
properties of the returned
ImageData object will be different from the
sw
and
sh
arguments.
Like
Canvas.toDataURL()
, this method is subject to a security check to prevent cross-origin
information leakage.
getImageData()
only returns an ImageData object if the underlying can-
vas is “origin-clean”; otherwise, it raises an exception. A canvas is not origin-clean if it has
ever had an image drawn in it (directly by
drawImage()
or indirectly through a CanvasPattern)
CanvasRenderingContext2D
876 | Client-Side JavaScript Reference
87
that has a different origin than the document that contains the canvas. Also, a canvas is not
origin-clean if it has ever had text drawn to it using a web font from a different origin.
boolean isPointInPath(double x, y)
isPointInPath()
returns
true
if the specified point falls within or on the edge of the current
path and returns
false
otherwise. The specified point is not transformed by the current trans-
formation matrix.
x
should be a value between 0 and
canvas.width
and
y
should be a value
between 0 and
canvas.height
.
The reason that
isPointInPath()
tests untransformed points is that it is designed for “hit-
testing”: determining whether a user’s mouse click (for example) is on top of the portion of
the canvas described by the path. In order to do hit-testing, mouse coordinates must first be
translated so that they are relative to the canvas rather than the window. If the canvas’s size
on the screen is different than the size declared by its
width
and
height
attributes (if
style.width
and
style.height
have been set, for example), the mouse coordinates also have
to be scaled to match the canvas coordinates. The following function is designed for use as
an onclick handler of a
<canvas>
and performs the necessary transformation to convert mouse
coordinates to canvas coordinates:
// An onclick handler for a canvas tag. Assumes a path is currently defined.
function hittest(event) {
var canvas = this; // Called in the context of the canvas
var c = canvas.getContext("2d"); // Get drawing context of the canvas
// Get the canvas size and position
var bb = canvas.getBoundingClientRect();
// Convert 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);
// Fill the path if the user clicked on it
if (c.isPointInPath(x,y)) c.fill();
}
void lineTo(double x, double y)
lineTo()
adds a straight line to the current subpath. The line begins at the current point and
ends at
(x,y)
. When this method returns, the current position is
(x,y)
.
TextMetrics measureText(string text)
measureText()
measures the width that the specified
text
would occupy if drawn with the
current
font
and returns a
TextMetrics
object containing the results of the measurement. At
the time of this writing, the returned object has only a single
width
property, and the text
height and bounding box are not measured.
void moveTo(double x, double y)
moveTo()
sets the current position to
(x,y)
and begins a new subpath with this as its first point.
If there was a previous subpath and it consisted of just one point, that empty subpath is
removed from the path.
CanvasRenderingContext2D
Client-Side JavaScript Reference | 877
Client-Side
JavaScript
Reference
Download from Wow! eBook <www.wowebook.com>
C# Word - Convert Word to HTML in C#.NET VB.NET How-to, VB.NET PDF, VB.NET Word, VB.NET Excel, VB to HTML converter toolkit SDK, preserves all the original anchors, links, bookmarks and Add references:
change link in pdf file; add a link to a pdf in preview How to C#: Basic SDK Concept of XDoc.PowerPoint Conversely, conversion from PDF to PowerPoint (.PPTX) is also split PowerPoint file(s), and add, create, insert including editing PowerPoint url links and quick
add page number to pdf hyperlink; adding hyperlinks to pdf
74
void putImageData(ImageData imagedata, double dx, dy, [sx, sy, sw, sh])
putImageData()
copies a rectangular block of pixels from an ImageData object onto the canvas.
This is a low-level pixel copy operation: the
globalCompositeOperation
and
globalAlpha
at-
tribute are ignored, as are the clipping region, transformation matrix, and shadow-drawing
attributes.
The
dx
and
dy
arguments specify the destination point in the canvas. Pixels from
data
will be
copied to the canvas starting at that point. These arguments are not transformed by the current
transformation matrix.
The last four arguments specify a source rectangle within the ImageData. If specified, only
the pixels within that rectangle will be copied to the canvas. If these arguments are omitted,
all pixels in the ImageData will be copied. If these arguments specify a rectangle that exceeds
the bounds of the ImageData, the rectangle will be clipped to those bounds. Negative values
for
sx
and
sy
are allowed.
One use for ImageData objects is as a “backing store” for a canvas—saving a copy of the
canvas pixels in an ImageData (using
getImageData()
) allows you to draw temporarily on the
canvas and then restore it to its original state with
putImageData()
.
void quadraticCurveTo(double cpx, cpy, x, y)
This method adds a quadratic Bezier curve segment to the current subpath. The curve starts
at the current point and ends at
(x,y)
. The control point
(cpX, cpY)
specifies the shape of the
curve between these two points. (The mathematics of Bezier curves is beyond the scope of
this book, however.) When this method returns, the current position is
(x,y)
. Also see the
bezierCurveTo()
method.
void rect(double x, y, w, h)
This method adds a rectangle to the path. This rectangle is in a subpath of its own and is not
connected to any other subpaths in the path. When this method returns, the current position
is
(x,y)
. A call to this method is equivalent to the following sequence of calls:
c.moveTo(x,y);
c.lineTo(x+w, y);
c.lineTo(x+w, y+h);
c.lineTo(x, y+h);
c.closePath();
void restore()
This method pops the stack of saved graphics states and restores the values of the Canvas-
RenderingContext2D properties, the clipping path, and the transformation matrix. See the
save()
method for further information.
void rotate(double angle)
This method alters the current transformation matrix so that any subsequent drawing appears
rotated within the canvas by the specified angle. It does not rotate the
<canvas>
element itself.
Note that the angle is specified in radians. To convert degrees to radians, multiply by
Math.PI
and divide by 180.
CanvasRenderingContext2D
878 | Client-Side JavaScript Reference
How to C#: Basic SDK Concept of XDoc.Word Conversely, conversion from PDF to Word (.docx) is also and split Word file(s), and add, create, insert document, including editing Word url links and quick
add links to pdf file; adding hyperlinks to pdf files
102
void save()
save()
pushes a copy of the current graphics state onto a stack of saved graphics states. This
allows you to temporarily change the graphics state, and then restore the previous values with
a call to
restore()
.
The graphics state of a canvas includes all the properties of the CanvasRenderingContext2D
object (except for the read-only
canvas
property). It also includes the transformation matrix
that is the result of calls to
rotate()
,
scale()
, and
translate()
. Additionally, it includes the
clipping path, which is specified with the
clip()
method. Note, however, that the current
path and current position are not part of the graphics state and are not saved by this method.
void scale(double sx, double sy)
scale()
adds a scale transformation to the current transformation matrix of the canvas. Scaling
is done with independent horizontal and vertical scaling factors. For example, passing the
values 2.0 and 0.5 causes subsequently drawn paths to be twice as wide and half as high as
they would otherwise have been. Specifying a negative value for
sx
causes X coordinates to
be flipped across the Y axis, and a negative value of
sy
causes Y coordinates to be flipped
across the X axis.
void setTransform(double a, b, c, d, e, f)
This method allows you to set the current transformation matrix directly rather than through
a series of calls to
translate()
,
scale()
, and
rotate()
. After calling this method, the new
transformation is:
x' a c e x = ax + cy + e
y' = b d f × y = bx + dy + f
1 0 0 1 1
void stroke()
The
stroke()
method draws the outline of the current path. The path defines the geometry
of the line that is produced, but the visual appearance of that line depends on the
strokeStyle
,
lineWidth
,
lineCap
,
lineJoin
, and
miterLimit
properties.
The term stroke refers to a pen or brush stroke. It means “draw the outline of.” Contrast this
stroke()
method with
fill()
, which fills the interior of a path rather than stroking the outline
of the path.
void strokeRect(double x, y, w, h)
This method draws the outline (but does not fill the interior) of a rectangle with the specified
position and size. Line color and line width are specified by the
strokeStyle
and
lineWidth
properties. The appearance of the rectangle corners is specified by the
lineJoin
property.
Unlike the
rect()
method,
strokeRect()
has no effect on the current path or the current point.
void strokeText(string text, double x, y, [maxWidth])
strokeText()
works just like
fillText()
, except that instead of filling the individual character
glyphs with
fillStyle
, it strokes the outline of each glyph using
strokeStyle
.
strokeText()
produces interesting graphical effects when used at large font sizes, but
fillText()
is more
commonly used for actually drawing text.
CanvasRenderingContext2D
Client-Side JavaScript Reference | 879
Client-Side
JavaScript
Reference
65
void transform(double a, b, c, d, e, f)
The arguments to this method specify the six nontrivial elements of a 3x3 affine transforma-
tion matrix
T
:
a c e
b d f
0 0 1
transform()
sets the current transformation matrix to the product of the transformation ma-
trix and the
T
:
CTM' = CTM × T
Translations, scales, and rotations can be implemented in terms of this general-purpose
transform()
method. For a translation, call
transform(1,0,0,1,dx,dy)
. For a scale, call
transform(sx, 0, 0, sy, 0, 0)
. For a clockwise rotation around the origin by an angle
x
, use:
transform(cos(x),sin(x),-sin(x), cos(x), 0, 0)
For a shear by a factor of
k
parallel to the X axis, call
transform(1,0,k,1,0,0)
. For a shear
parallel to the Y axis, call
transform(1,k,0,1,0,0)
.
void translate(double x, double y)
translate()
adds horizontal and vertical offsets to the transformation matrix of the canvas.
The arguments
dx
and
dy
are added to all points in any subsequently defined paths.
ClientRect
an element bounding box
A ClientRect object describes a rectangle, using Window or viewport coordinates. The
get
BoundingClientRect()
method of
Element
returns objects of this kind to describe the on-screen
bounding box of an element. ClientRect objects are x static: they do not change when the
element they describe changes.
Properties
readonly float bottom
The Y position, in viewport coordinates, of the bottom edge of the rectangle.
readonly float height
The height, in pixels, of the rectangle. In IE8 and before, this property is not defined; use
bottom-top
instead.
readonly float left
The X position, in viewport coordinates, of the left edge of the rectangle.
readonly float right
The X position, in viewport coordinates, of the right edge of the rectangle.
readonly float top
The Y position, in viewport coordinates, of the top edge of the rectangle.
ClientRect
880 | Client-Side JavaScript Reference
59
readonly float width
The width, in pixels, of the rectangle. In IE8 and before, this property is not defined; use
right-left
instead.
CloseEvent
specifies whether a WebSocket closed cleanly
Event
When a
WebSocket
connection closes, a nonbubbling, noncancelable close event is fired on
the WebSocket object and an associated CloseEvent object is passed to any registered event
handlers.
Properties
readonly boolean wasClean
If the WebSocket connection closed in the controlled way specified by WebSocket pro-
tocol, with acknowledgment between client and server, the close is said to be clean, and
this property will be
true
. If this property is
false
, the WebSocket may have closed as
the result of a network error of some sort.
Comment
an HTML or XML comment
Node
A Comment node represents a comment in an HTML or XML document. The content of the
comment (i.e., the text between
<!--
and
-->
) is available through the
data
property or through
the
nodeValue
property inherited from Node. You can create a comment object
with
Document.createComment()
.
Properties
string data
The text of the comment.
readonly unsigned long length
The number of characters in the comment.
Methods
void appendData(string data)
void deleteData(unsigned long offset, unsigned long count)
void insertData(unsigned long offset, string data)
void replaceData(unsigned long offset, unsigned long count, string data)
string substringData(unsigned long offset, unsigned long count)
Comment nodes have most of the methods of a Text node, and those methods work as
they do on Text nodes. They are listed here, but see
Text
for documentation.
Comment
Client-Side JavaScript Reference | 881
Client-Side
JavaScript
Reference
74
Console
debugging output
Modern browsers (and older ones with debugger extensions, such as Firebug, installed) define
a global property
console
that refers to a Console object. The methods of this object define a
API for simple debugging tasks, such as logging messages to a console window (the console
may go by a name such as “Developer Tools” or “Web Inspector”).
There is no formal standard that defines the Console API, but the Firebug debugger extension
for Firefox has established a de facto standard and browser vendors seem to be implementing
the Firebug API, which is documented here. Support for the basic
console.log()
function is
nearly universal, but the other functions may not be as well supported in all browsers.
Note that in some older browsers, the
console
property is only defined when the console
window is open, and running scripts that use the Console API without the console open will
cause errors.
See also
ConsoleCommandLine
.
Methods
void assert(any expression, string message)
Display an error
message
on the console if
expression
is
false
or a falsy value like
null
,
undefined
,
0
, or the empty string.
void count([string title])
Display the specified
title
string along with a count of the number of times that this method
has been called with that string.
void debug(any message...)
Like
console.log()
, but mark the output as debugging information.
void dir(any object)
Display the JavaScript
object
on the console in a way that allows the developer to examine
its properties or elements and interactively explore nested objects or arrays.
void dirxml(any node)
Display XML or HTML markup for the document
node
in the console.
void error(any message...)
Like
console.log()
, but mark the output as an error.
void group(any message...)
Display
message
in the same way that
log()
does, but display it as the title of a collapsible
group of debug messages. All subsequent console output will be formatted as part of this
group until a corresponding call to
groupEnd()
occurs.
void groupCollapsed(any message...)
Begin a new group of messages, but start it in its collapsed state, so that subsequent debugging
output is hidden by default.
Console
882 | Client-Side JavaScript Reference
Documents you may be interested
Documents you may be interested
