CvsGraphCtx REFERENCE MANUAL
Creating a CvsGraphCtx
To start drawing with the CvsGraphCtx canvas graphics context an instance of the CvsGraphCtx must be created. To create a new graphics context requires the canvas element to exist in the web page and for it to have a unique ID. Then call the CvsGraphCtx constructor passing the canvas ID as the parameter as follows:
var g = new CvsGraphCtx('canvasID');
The returned CvsGraphCtx object, g has the properties and drawing methods listed below.
CvsGraphCtx Properties
Syntax:
var value = cvsCtx.property;
Properties:
ctx:CanvasRenderingContext2D - the canvas drawing context.
aRatio:Number - Aspect ratio of the canvas element, the canvas width divided by canvas height. If the canvas is square, aRatio=1, if canvas is 300px wide and 200 pixels high, aRatio=1.5.
rawWidth:Number - Width of the canvas in screen pixels.
rawHeight:Number - Height of the canvas in screen pixels.
penWid:Number - Current width of the drawing pen measured in screen pixels. All stroked lines will be rendered in this width until a call to setPenWidth changes the pen width.
penCol:String - Current color of the drawing pen. The returned string will be in the "rgba(r, g, b, a)" format where r is the value (0 to 255) of the red component of the pen color, g is the green component, b is the blue component and a is the alpha or transparency component (0 to 1.0). The default color is black "rgba(0, 0, 0, 1.0)".
bkgCol:String - Current background color. bkgCol is the default color for the fillViewport method. If fillViewport is called with no fill color parameter passed, the viewport is filled with the current background color. The returned string will be in the "rgba(r, g, b, a)" format where r is the value (0 to 255) of the red component of the pen color, g is the green component, b is the blue component and a is the alpha or transparency component (0 to 1.0). The default color is white "rgba(255, 255, 255, 1.0).
fontSize:Number - Current size of the cvsGraphCtx font, measured on points. This is the default value for the rendered size of all labels unless overridden by the size parameter passed in the call to the label method. The default value is 10pt
CvsGraphCtx Methods
clearCanvas,
setViewport, fillViewport, setWorldCoords, setRotation, clearRotation,
setPenColor, setPenWidth, setFontSize,
move, line, polyLine, quadBezier, cubicBezier,
arrow, rect, polygon, shape,
svgPath,
label,
drawImg, updateImg,
dupCtx.
clearCanvas
Syntax:
cvsCtx.clearCanvas();
Description:
Clears the canvas, deleting all drawing, images and text labels. The canvas is cleared back to its default color which is inherited from the canvas style. All graphics contexts are left intact but they have nothing left of any drawing that may have been done using them.
This is a useful call to prevent memory leaks in excanvas, drawing over previous graphics doesn't free the resources used by excanvas to draw the underlying graphics.
Parameters:
none.
setViewport
Syntax:
cvsCtx.setViewport(lowerLeftX:Number, lowerLeftY:Number, width:Number, height:Number)
Description:
Defines a rectangular area within the canvas to be used in subsequent calls to setWorldCoords or fillViewport.
Drawing a graph may require several calls to setViewport. The first might define the area within the canvas for the graph. The fillViewport is called to fill the background. A second call to setViewport might define a smaller rectangle that represent the extend of the data area.
Note: Every call to setViewport resets the world coordinates to the default values which sets lower left corner of the viewport to 0,0 and the width and height to the width and height values that created the viewport, i.e. the and y scale factors are the same and they make the width of the canvas 100 in the world coordinates.
Parameters:
lowerLeftX:Number - X coordinate of the lower left corner of the viewport, measured from the lower left corner of the canvas in units of % of canvas width.
lowerLeftY:Number - Y coordinate of the lower left corner of the viewport, measured from the lower left corner of the canvas in units of % of canvas width.
width:Number - Width of the viewport measured in % of the width of the canvas.
height:Number - Height of the viewport measured in % of the width of the canvas.
Note: setViewport may be called with no parameters passed, setViewport(). This call will set the viewport to be the full canvas size. So calling setViewport() is equivalent to the call setViewport(0, 0, 100, 100/cvsCtx.aRatio), where aRatio is the canvas aspect ratio (width/height).
fillViewport
Syntax:
cvsCtx.fillViewport(fillColor:String)
Description:
Fills the current viewport area with the color fillColor and sets the background color, bkgCol, to fillColor.
Parameters:
fillColor:String - The fill color to be used. The fill color may be expressed in any of the four canvas color formats:
- Hex notation "#rrggbb", where rr sets the red level (00 to ff), gg sets the green and bb sets the blue level.
- RGBA notation "rgba(r, g, b, a)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively and a is the alpha or transparency value 0 (transparent) to 1.0 (opaque).
- RGB notation "rgb(r, g, b)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively.
- Predefined colors names eg. "red", "blue", "maroon", "palegoldenrod", "wheat" etc. There are 140 standard color names in the extended color list.
If fillViewport is called with no parameter passed, the viewport is filled with the current background color (cvsCtx.bkgCol).
setWorldCoords
Syntax:
cvsCtx.setWorldCoords(leftX:Number, rightX:Number, bottomY:Number, topY:Number)
Description:
Defines a world coordinate system for subsequent drawing operations with this graphics context. The world coordinate system sets translation and scaling factors to map world coordinate values to canvas drawing pixel values. This is done by setting the world coordinate values of the left, right, bottom and top edges of the viewport.
Parameters:
leftX:Number - World coordinate value of the left edge of the viewport.
rightX:Number - World coordinate value of the right edge of the viewport.
bottomY:Number - World coordinate value of the bottom edge of the viewport.
topY:Number - World coordinate value of the top edge of the viewport.
If setWorldCoords is called with no parameter passed, the world coordinate system is set to have the viewport lowerLeft=0,0 and X and Y scaled in viewport units (% of canvas width). As an example, if the viewport was set by the call setViewport(10, 20, 60, 30) and no subsequent call to setWorldCoords, then the world coordinates will be the same as if the call setWorldCoords(0, 60, 0, 30) were made.
setRotation
Syntax:
cvsCtx.setRotation(orgX:Number, orgX:Number, degs:Number)
Description:
Rotates the current world coordinate system for subsequent drawing operations with this graphics context. The world coordinate system is rotated about the point orgX, orgY measured in the current world coordinates, by degs degrees measured positive counter-clockwise from the horizontal. Each call to setRotation resets the rotation value, multiple calls are not cumulative.
Parameters:
orgX:Number - X coordinate value of the center of rotation measured in current world coordinates.
orgY:Number - Y coordinate value of the center of rotation measured in current world coordinates.
degs:Number - Number of degrees by which the world coordinate system is rotated, measured in degrees +ve counter clockwise.
clearRotation
Syntax:
cvsCtx.clearRotation()
Description:
Resets the current world coordinate system rotation to 0 for subsequent drawing operations with this graphics context.
Parameters:
none.
setPenColor
Syntax:
cvsCtx.setPenColor(color:String)
Description:
Sets the color for subsequent drawing operations. The color is stored as the property cvsCtx.penCol.
Parameters:
color:String - The color to be used. The color may be expressed in any of the four canvas color formats:
- Hex notation "#rrggbb", where rr sets the red level (00 to ff), gg sets the green and bb sets the blue level.
- RGBA notation "rgba(r, g, b, a)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively and a is the alpha or transparency value 0 (transparent) to 1.0 (opaque).
- RGB notation "rgb(r, g, b)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively. This is a suitable format for entering dynamic color values. The calculated r, g and b values may be passed to drawing methods by the string "rgb("+r+","+g+","+b+")".
- Predefined colors names eg. "red", "blue", "maroon", "palegoldenrod", "wheat" etc. There are 140 standard color names in the extended color list.
If no call is made to setPenCol the default pen color is black ("#000000").
setPenWidth
Syntax:
cvsCtx.setPenWidth(width:Number)
Description:
Sets the line width for subsequent stroked drawing. The width is stored as the property cvsCtx.penWid.
Parameters:
width:Number - Pen width, measured in canvas drawing pixels. Drawing pixels are mapped 1 to 1 with screen pixels unless the display has been zoomed by the user.
If no call is made to setPenWid the default pen width is 1.
setFontSize
Syntax:
cvsCtx.setFontSize(size:Number)
Description:
Sets the default font size. The default font size is used for labeling of axes in drawAxes and drawBoxAxes methods. The default font size is also used for subsequent calls to the label method. The font size is stored as the property cvsCtx.fontSize.
Parameters:
size:Number - Font size, measured in points.
If no call is made to setFontSize the default size is 10pt.
move
Syntax:
cvsCtx.move(x:Number, y:Number)
Description:
Updates the current pen location to x, y. Nothing is visible on the screen as a result of this call but any subsequent line call will begin from the current pen location.
Parameters:
x:Number - X coordinate of the new pen location measured in world coordinates.
y:Number - Y coordinate of the new pen location measured in world coordinates.
line
Syntax:
cvsCtx.line(x:Number, y:Number, style:String)
Description:
Draws a line from the current pen location to the point x, y. The line is draw with the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000"), the default style is "solid".
The current pen location is updated to x, y.
Parameters:
x:Number - X coordinate of the new pen location measured in world coordinates.
y:Number - Y coordinate of the new pen location measured in world coordinates.
style:String - Style of the line, "dashed", "dotted" or "solid". If the style parameter is omitted, "solid" or any other value is passed, a solid line is drawn. The "dashed" line is drawn with approx 50% mark space ratio with dashes approx 7 pixels long. The "dotted" line is drawn with 2 pixels dots and approx 5 pixel spaces.
polyLine
Syntax:
cvsCtx.polyLine(data:Array)
Description:
Draws a multi-segment line represented by the coordinate pairs stored in the array data. The pen is first moved to the first point in the array and then a line is drawn to each successive data point in the data array. The line is draw with the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000").
The current pen location is updated to the location represented by the last coordinate pair in the array.
The polyLine method is the recommended method of drawing a line consisting of more than, say 100 segments. The alternative method would be to make a call to the move method, and then loop through all the data points making a call to the line method for each one. With this method each line segment is stroked individually and the drawing overhead is very large, the time to draw hundreds of segments may be unacceptably long. The polyLine method can be an order of magnitude faster.
Parameters:
data:Array - An array of x,y values measured in world coordinates. The x,y data pairs may be stored in either of two formats:
1. data is a one dimensional array where every second value represents an x coordinate and every other value represents a y coordinate: data = [x0, y0, x1, y1, x2, .... ]. In this format, n data points are held in an array with 2*n elements (n = data.length/2). An example of storing coordinates values in this format:
var data = [];
for (var i=0; i<n; i++)
{
data[2*i] = x(i);
data[2*i+1] = y(i);
}
2. data is an array of 2 element arrays: data = [ [x0, y0], [x1, y1], .... ]. In this format n data points are held in an array with n elements (n = data.length). An example of storing coordinates values in this format:
var data = [];
for (var i=0; i<n; i++)
{
data[i] = new Array();
data[i][0] = x(i);
data[i][1] = y(i);
}
quadBezier
Syntax:
cvsCtx.quadBezier(c1x:Number, c1y:Number, x:Number, y:Number)
Description:
Draws a quadratic Bezier curve starting from the current pen location and ending at x, y. The curvature determined by the control point whose coordinates are c1x, c1y. The current path is closed after the curve is drawn and the line is stroked in the current pen color and pen width.
The current pen location is updated to x, y.
Parameters:
c1x:Number - X coordinate of the control point measured in world coordinates.
c1y:Number - Y coordinate of the control point measured in world coordinates.
x:Number - X coordinate of the curve's endpoint measured in world coordinates.
y:Number - Y coordinate of the curve's endpoint measured in world coordinates.
cubicBezier
Syntax:
cvsCtx.cubicBezier(c1x:Number, c1y:Number, c2x:Number, c2y:Number,x:Number, y:Number)
Description:
Draws a cubic Bezier curve starting from the current pen location and ending at x, y. The curvature determined by the two control point whose coordinates are c1x, c1y and c2x, c2y. The current path is closed after the curve is drawn and the line is stroked in the current pen color and pen width.
The current pen location is updated to x, y.
Parameters:
c1x:Number - X coordinate of the first control point measured in world coordinates.
c1y:Number - Y coordinate of the first control point measured in world coordinates.
c2x:Number - X coordinate of the second control point measured in world coordinates.
c2y:Number - Y coordinate of the second control point measured in world coordinates.
x:Number - X coordinate of the curve's endpoint measured in world coordinates.
y:Number - Y coordinate of the curve's endpoint measured in world coordinates.
arrow
Syntax:
cvsCtx.arrow(x1:Number, y1:Number, x2:Number, y2:Number, size:Number)
Description:
Draws a line from the location x1, y1 to the location x2, y2 with an arrow head drawn with its tip at location x2, y2. The line is draw with the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000").
The current pen location is updated to x2, y2.
Parameters:
x1:Number - X coordinate of the tail end of the arrow measured in world coordinates.
y1:Number - Y coordinate of the tail end of the arrow measured in world coordinates.
x2:Number - X coordinate of the head of the arrow measured in world coordinates.
y2:Number - Y coordinate of the head of the arrow measured in world coordinates.
size:Number - The size of the arrow head taking values from 1 to 9 inclusive. The value is scaled as function of line width.
Examples of the arrow command may be seen in the diagram on the XEyes page.
rect
Syntax:
cvsCtx.rect(lowerLeftX:Number, lowerLeftY:Number, w:Number, h:Number, fillColor:String)
Description:
Draws a rectangle.
The current pen location is updated to x, y.
Parameters:
lowerLeftX:Number - X coordinate of the lower left corner of the rectangle measured in world coordinates.
lowerLeftY:Number - Y coordinate of the lower left corner of the rectangle measured in world coordinates.
w:Number - Width of the rectangle measured in world coordinates.
h:Number - Height of the rectangle measured in world coordinates.
fillColor:String - Optional fill color. If present the rectangle is filled with this color. The fill color may be expressed in any of the three HTML/CSS color formats (see setPenColor).
If fillColor parameter is omitted the rectangle outline only is drawn in the current pen color and pen width with no opaque fill.
polygon
Syntax:
cvsCtx.polyLine(data:Array, fillColor:String)
Description:
Draws a multi-sided closed shape represented by the coordinate pairs stored in the array data. The pen is first moved to the first point in the array and then a line is drawn to each successive data point in the data array, forming the sides of the polygon. After the line to the last data point is drawn the polygon is closed with a line from the last data point to the first. If the fillColor parameter is present the shape is filled with this color. If no valid fillColor string is present the polygon is drawn as an outline only using the current pen width and color set by the most recent call to setPenWidth and setPenColor. If no calls to these methods have been made the default pen parameters are used. The default pen width is 1px and default color is black ("#000000").
The current pen location is updated to the location represented by the first coordinate pair in the array.
Parameters:
data:Array - An array of x,y values measured in world coordinates. The x,y data pairs may be stored in either of two formats:
1. data is a one dimensional array where every second value represents an x coordinate and every other value represents a y coordinate: data = [x1, y0, x1, y1, x2, .... ]. In this format, n data points are held in an array with 2*n elements (n = data.length/2). An example of storing coordinates values in this format:
var data = [];
for (var i=0; i<n; i++)
{
data[2*i] = x(i);
data[2*i+1] = y(i);
}
2. data is an array of 2 element arrays: data = [ [x0, y0], [x1, y1], .... ]. In this format n data points are held in an array with n elements (n = data.length). An example of storing coordinates values in this format:
var data = [];
for (var i=0; i<n; i++)
{
data[i] = new Array();
data[i][0] = x(i);
data[i][1] = y(i);
}
fillColor:String - Optional fill color. If present the shape is filled with this color. The fill color may be expressed in any of the three HTML/CSS color formats (see setPenColor).
If fillColor parameter is omitted the polygon outline only is drawn in the current pen color and pen width with no opaque fill.
shape
Syntax:
cvsCtx.shape(type:String, x:Number, y:Number, size:Number, fillColor:String)
Description:
Draws a shape, either a circle, equilateral triangle or square, either as an outline or color filled.
Parameters:
type:String - Specifies which shape is to be drawn, allowed values are "circle", "triangle" and "square". If type string is not exactly "circle", "triangle" or "square" then the default "circle" shape is drawn.
x:Number - X coordinate of the center of the shape measured in world coordinates.
y:Number - Y coordinate of the center of the shape measured in world coordinates.
w:Number - Size of the shape, the diameter of the circle, or the side length of the triangle or square, measured in the world coordinates of the x axis.
fillColor:String - Optional fill color. If present the shape is filled with this color. The fill color may be expressed in any of the three HTML/CSS color formats (see setPenColor).
If fillColor parameter is omitted the shape outline only is drawn in the current pen color and pen width with no opaque fill.
svgPath
Syntax:
svgPath(data:String, x:Number, y:Number, scl:Number, fillColor:String, cx:Number, cy:Number, degs:Number)
Description:
Draws a shape whose outline comprises a set of segments each specified in the SVG path element drawing command syntax. The shape is drawn with its internal (SVG) drawing coordinates origin placed at x, y in world coordinates. The shape's width and height may be scaled by a factor scl. If the optional fillColor is specified then the shape is filled with that color. If fillColor is omitted or is null then the shape outline only is drawn in the current pen color. The shape may be optionally drawn rotated by degs degrees, the center of rotation is the point cx, cy specified in the internal (SVG) coordinates.
Parameters:
data:String - A copy of the SVG path d="(path data)" attribute, where the d attribute contains the moveto, line, curve (both cubic and quadratic Béziers), arc and closepath instructions. The coordinate pairs in this string are in the internal (SVG path) coordinates, not the world coordinates of the calling cvsGraphCtx (see notes).
x:Number - X coordinate of the point at which the SVG path drawing origin is to be positioned, measured in world coordinates.
y:Number - Y coordinate of the point at which the SVG path drawing origin is to be positioned, measured in world coordinates.
scl:Number - The scale factor, greater than 0, by which all SVG path coordinates will be multiplied. This parameter allows the shape defined by the SVG path to be stretched or shrunk as required. The same scale factor is applied to both x and y coordinates. The SVG path aspect ration will be maintained if the current world coordinates have 'square' pixels (see cvsGraphCtx Reference Manual. Original SVG path dimensions are used for rendering if scl=1.
fillColor:String - Optional fill color. If present the shape defined by the path is filled with this color. The fill color may be expressed in any of the four canvas color formats:
- Hex notation "#rrggbb", where rr sets the red level (00 to ff), gg sets the green and bb sets the blue level.
- RGBA notation "rgba(r, g, b, a)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively and a is the alpha or transparency value 0 (transparent) to 1.0 (opaque).
- RGB notation "rgb(r, g, b)" where r, g and b are decimal numbers in the range 0 to 255 representing the red, green and blue levels respectively. This is a suitable format for entering dynamic color values. The calculated r, g and b values may be passed to drawing methods by the string "rgb("+r+","+g+","+b+")".
- Predefined colors names eg. "red", "blue", "maroon", "palegoldenrod", "wheat" etc. There are 140 standard color names in the extended color list.
If fillColor parameter is omitted the shape outline only is drawn in the current pen color and pen width with no opaque fill.
cx:Number - Optional parameter, the X coordinate of the center of rotation of the shape, required if non-zero value for degs parameter is passed. Measured in the SVG path coordinates (see notes).
cy:Number - The Y coordinate of the center of rotation.
degs:Number - Rotation angle applied to the shape when rendered to the canvas, measured in degrees, +ve counter clockwise. Rotation angles should be in the range -180° to 180°. The center of rotation is the cx, cy point measured in the SVG path coordinates (prior to any scaling), i.e, Y coordinates are positive down (see notes).
Notes:
SVG Path Coordinate System
The data string SVG drawing commands will be values in the original drawing system coordinates used by the graphics editing program when the path was drawn. Thus the coordinate values may be expressed in inches or pixels or miles etc and the origin may have been set anywhere within this coordinate system. Most significantly the SVG coordinate system all have the Y coordinate +ve down and most often have their origin in the top left corner. The cvsGraphCtx has world coordinates Y axis +ve up and the origin typically in the lower left.
To have complete control of the how the shape appears when drawn with the svgPath method, the parameters x, y and scl are provided. scl is the scale factor by which all SVG path coordinates are multiplied, so getting the desired size is straight forward, calculate by how much and inch or pixel or mile must be scaled to match the current world coordinates (set by the last call to setWorldCoords method) or use trial and error to set the scl value. The x and y values are used to position the shape set the world coordinates, x is added to all SVG X coordinate values and y is added to all SVG Y coordinate values. This has the effect of putting the SVG coordinates origin [0, 0] at the world coordinate location x, y.
The SVG path coordinate values will be flipped vertically so that the shape is draw the right way up in the world coordinates. This means that if the coordinate mapping from SVG to world coordinates is Xworld = x + scl * Xsvg and Yworld = y - scl * Ysvg.
SVG Path Data Commands:
The path is defined in the 'd' attribute of the 'path' tag by a string of white space separated commands and coordinates.
Path commands are case-sensitive, An uppercase command's points use absolute positioning and a lowercase command's points are relative the last point. The one exception to this is the first point always uses absolute positioning.
Command |
Parameters |
Description |
|
|---|---|---|---|
M |
x,y |
moveto: Moves the pen to a new location. No line is drawn. All path data must begin with a 'moveto' command. |
|
Line Commands |
|||
L |
x,y |
lineto: Draws a line from the current point to the point (x,y). |
|
H |
x |
horizontal lineto: Draws a horizontal line from the current point to x. |
|
V |
y |
vertical lineto: Draws a vertical line from the current point to y. |
|
Cubic Bezier Curve Commands |
|||
C |
x1 y1 x2 y2 x y |
curveto: Draw a cubic bezier curve to the point (x,y) where the points (x1,y1) and (x2,y2) are the start and end control points, respectively. |
|
S |
x2 y2 x y |
shorthand/smooth curveto: Draw a curve to the point (x,y) where the point (x2,y2) is the end control point and the start control point is the reflection of the last point's end control point. |
|
Quadratic Bezier Curve Commands |
|||
Q |
x1 y1 x y |
Quadratic Bezier curveto: Draw a quadratic bezier between the last point and point (x,y) using the point (x1,y1) as the control point. |
|
T |
x y |
Shorthand/smooth quadratic Bezier curveto: Draw a quadratic bezier between the last point and point (x,y) using the reflection of the last control point as the control point. |
|
Elliptical Arc Curve Commands |
|||
A |
rx ry x-rotation large-arc-flag sweep-flag x y |
elliptical arc: Draws and arc from the current point to x, y. The actual scale factor and position of the arc needed to bridge the two points is computed by the SVG viewer. |
|
End Path Commands |
|||
z |
- |
closepath: Closes the path. A line is drawn from the last point to the first. |
|
Note: To use relative positioning use a lowercase letter for the command.
Examples
The following shapes are the SVG path examples from the W3C SVG recommendation document at http://www.w3.org/TR/SVG/paths.html. The path data attribute string has been cut and pasted into a JavaScript string variable and the shapes drawn using the cvsCtx.svgPath method, the source code is shown below the Fig 1.
Figure 1. Example of svgPath, four paths are drawn on the canvas, source code for shown below.
var Triangle = "M 100 100 L 300 100 L 200 300 z";
var CubicBezier = "M100,200 C100,100 250,100 250,200S400,300 400,200";
var QuadBezier1 = "M30,75 Q240,30 300,120";
var QuadBezier2 = "M200,300 Q400,50 600,300 T1000,300";
var Arc1 = "M300,200 h-150 a150,150 0 1,0 150,-150 z";
var Arc2 = "M275,175 v-150 a150,150 0 0,0 -150,150 z";
var Arc3 = "M60,350 l 50,-25a25,25 -30 0,1 50,-25 l 50,-25\
a25,50 -30 0,1 50,-25 l 50,-25\
a25,75 -30 0,1 50,-25 l 50,-25\
a25,100 -30 0,1 50,-25 l 50,-25";
function drawPaths(cvsID)
{
var g = new CvsGraphCtx(cvsID);
g.clearCanvas(); // clear all previous drawing and text
g.setViewport(15, 5, 70, 70);
g.fillViewport("cornsilk"); // fill viewport with pale yellow
g.setWorldCoords(0, 500, -100, 400); // square pixels
g.setPenColor("blue");
g.svgPath(Triangle, 20, 350, 0.4, "red");
g.setPenColor("red");
g.svgPath(CubicBezier, 140, 350, 0.4);
g.svgPath(QuadBezier2, 0, 250, 0.3);
g.setPenColor("blue");
g.svgPath(Arc1, 0, 125, 0.5, "red");
g.svgPath(Arc2, 0, 125, 0.5, "yellow");
g.setPenColor("red");
g.svgPath(Arc3, 200, 125, 0.5);
}
label
Syntax:
cvsCtx.label(str:String, x:Number, y:Number, lorg:Number, rot:Number, fntSize:Number)
Description:
Draws a text string onto the canvas.
Parameters:
str:String - The text string to be written. The character set allowed comprises all the upper and lower case letters, numbers and punctuation marks found on the standard US keyboard (94 characters).
x:Number - X coordinate of the position at which the origin of the label will be drawn, measured in world coordinates.
y:Number - Y coordinate of the position at which the origin of the label will be drawn, measured in world coordinates.
lorg:Number - Location of the origin within the label that is used as the reference point for positioning the label and sets the center of rotation for rotating the label. lorg can take integer values 1..9. lorg=1 locates the top, left of the label at the x, y position, lorg=2 locates the top, center of the label at the x, y position, and so on. Fig 5 shows the effect of each lorg value. In fig 5, each label's x, y coordinates are those of the adjacent grid intersection, the lorg value of each label determines where the label is positioned with respect to its x, y values.
Figure 5. Placement of label relative to the x,y parameter for the 9 possible values of lorg.
rot:Number - Rotation angle applied to the label when rendered to the canvas, measured in degrees, +ve counter clockwise. Rotation angles should be in the range -180° to 180°. The center of rotation is the lorg point, i.e, if lorg=1 the text is rotated with the center of rotation at the top left corner, if lorg=6 the text is rotated about the center of the right hand edge of the text string, and so on.
fntSize:Number - Size of the font to be used when rendering the label, measured in points. If omitted the default font size is used. The default font is set by the last call to the setFontSize method.
drawImg
Syntax:
var img = cvsCtx.drawImg(imgURL:String, x:Number, y:Number, width:Number, lorg:Number, rot:Number):Image
Description:
Loads the image file into a JavaScript Image object and renderers it onto the canvas.
Parameters:
imgURL:String - URL of the image to load.
x:Number - X coordinate of the reference point at which the image is to be rendered. X is in world coordinates set by the most recent call to setWorldCoords.
y:Number - Y coordinate of the reference point at which the image is to be rendered. Y is in world coordinates set by the most recent call to setWorldCoords.
w:Number - Width of the rendered image (before any rotation is applied) measured in units of the X axis in the world coordinate system.
lorg:Number - Location of the origin within the image that is used as the reference point for positioning the image and sets the center of rotation for rotating the image. lorg can take integer values 1..9. lorg=1 set the origin at the top-left of the image, lorg=2 locates the top-center of the image and so on. Refer to Fig 2 for the location of the 9 possible values.
rot:Number - Rotation angle applied to the image when rendered to the canvas., measured in degrees, +ve anti-clockwise. Rotation angles should be in the range -180° to 180°. The center of rotation is the lorg point, i.e, if lorg=1 the image is rotated about the top left corner by rot° anti-clockwise. If lorg=5 the image is rotated about its center point.
Returns:
Image - A reference to the JavaScript Image object holding the local copy of the image. This may be used in subsequent calls to updateImg.
updateImg
Syntax:
cvsCtx.updateImg(img:Image, x:Number, y:Number, width:Number, lorg:Number, rot:Number)
Description:
Redraws the previously loaded image img with updated position size and rotation values.
Parameters:
img:Image - The HTML Image Object to be redrawn in the updated position.
x:Number - X coordinate of the reference point at which the image is to be rendered. X is in world coordinates set by the most recent call to setWorldCoords.
y:Number - Y coordinate of the reference point at which the image is to be rendered. Y is in world coordinates set by the most recent call to setWorldCoords.
w:Number - Width of the rendered image (before any rotation is applied) measured in units of the X axis in the world coordinate system.
lorg:Number - Location of the origin within the image that is used as the reference point for positioning the image and sets the center of rotation for rotating the image. lorg can take integer values 1..9. lorg=1 set the origin at the top-left of the image, lorg=2 locates the top-center of the image and so on. Refer to Fig 2 for the location of the 9 possible values.
rot:Number - Rotation angle applied to the image when rendered to the canvas., measured in degrees, +ve anti-clockwise. Rotation angles should be in the range -180° to 180°. The center of rotation is the lorg point, i.e, if lorg=1 the image is rotated about the top left corner by rot° anti-clockwise. If lorg=5 the image is rotated about its center point.
dupCtx
Syntax:
cvsCtx.dupCtx(sourceCtx:CvsGraphCtx)
Description:
Copy the graphics context properties from another cvsGraphContext into cvsCtx. When drawing onto layers, this method provides a quick way to copy the graphics context properties into a new layer so that the drawing there will all be in the same world coordinates. cvsCtx.dupCtx() copies the properties, scale factors and so on, from the graphics context sourceCtx.
Parameters:
sourceCtx:CvsGraphCtx - The source CvsGraphCtx from which the cvsCtx properties are copied.