Click or drag to resize

Telogis.GeoBase.Canvas

Verizon Connect Logo
Print this page
Learn more about Verizon Connect GeoBase.
Get information about the latest release
Canvas Class

Canvas inherits from AbstractDOMEntity.

A utility for managing and rendering primitive shapes to a VML (Internet Explorer v8 or less) or SVG (Webkit) element. Shapes are managed as individual entities, as is the style of vector-graphics implementations like VML and SVG, for performance reasons. That is, to draw on a canvas once it has been created, methods to create these primitives should be called (e.g. Canvas.circle, Canvas.rect), but if further manipulation of them is desired (e.g. to clear the Canvas), references to the objects returned by these functions should be kept and have appropriate methods called.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});
Constructor
NameDescription
Canvas(config, beforeAttach)

Arguments

  • config (Object) - Configuration options for the Canvas.

    Properties
    NameTypeDescription
    fillColorColor

    The default fill color that primitives should be created with. This can be changed later for all newly-created primitives by calling Canvas.setFillColor, or on a per-primitive basis with Canvas.Shapes.AbstractShape.setFillColor. If this is set to null, fill is disabled.

    Defaults to null. This property may also be referenced by the name: fillColour.
    idString

    The ID of the element to create the Canvas in. If this is the string identifier of some DOM node on the page (usually a div), it overrides the Canvas.config.parent property.

    Defaults to 'anonymous_#'.
    lineColorColor

    The default line color that primitives should be created with. This can be changed later for all newly-created primitives by calling Canvas.setLineColor, or on a per-primitive basis with Canvas.Shapes.AbstractShape.setLineColor. If this is set to null, line stroking is disabled.

    Defaults to new Color (0x00, 0x00, 0x00, 1.0). This property may also be referenced by the name: lineColour.
    lineWidthNumber

    The default line width that primitives should be created with. This can be changed later for all newly-created primitives by calling Canvas.setLineWidth, or on a per-primitive basis with Canvas.Shapes.AbstractShape.setLineWidth.

    Defaults to 1.
    parentString

    The parent DOM node to append the Canvas to. This may be either its string ID or a reference to the element itself. This parameter is redundant if AbstractDOMEntity.config.id refers to an existing element.

    Defaults to document.body.
    sizeSize

    The size to initialize the viewable area of the canvas to if none is defined for the parent element.

    Defaults to new Size (0, 0).

  • (Optional)beforeAttach (Function) - An optional callback to be executed (in arbitrary scope) after the canvas's root element is created, but before it is attached to the main DOM tree. Appropriate specification of this function can avoid unnecessary DOM reflows. Defaults to function (elem) {}.

Functions
NameDescription
circle (Point center, Number radius, Widgets.Map map)

Creates a circle on the Canvas as an ellipse with identical horizontal and vertical axis lengths.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle 200 pixels down and right of the upper-left corner of the canvas
var myCircle = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 50, map);
myCircle.draw();

// Or use a LatLon location
var myCircle1 = myCanvas.circle(new Telogis.GeoBase.LatLon(33.563259,-117.788995), 50, map);
myCircle1.draw();
Arguments

  • (Optional) center (Point or LatLon) - The pixel coordinates or location of the circle's center. Defaults to new Point(0, 0).

  • (Optional) radius (Number) - The pixel radius of the circle. Defaults to 0.

  • map (Widgets.Map) - The map on which to draw the circle.

Returns

Canvas.Shapes.Ellipse - The ellipse representing the circle on the canvas.

destroy ()

Frees resources used by the canvas, and calls Canvas.Shapes.AbstractShape.destroy on each of its registered shapes.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle 200 pixels down and right of the upper-left corner of the canvas
var myCircle = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 50);
myCircle.draw();

// Call a test function when the canvas is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Destroy the canvas and its content (the circle)
    myCanvas.destroy();
};
ellipse (Point center, Number radiusX, Number radiusY, Widgets.Map map)

Creates an ellipse on the Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw an ellipse 200 pixels down and right of the upper-left corner of the canvas.
// Ellipse dimensions are 100 pixels wide by 20 pixels high
var myEllipse = myCanvas.ellipse(new Telogis.GeoBase.Point(200,200), 100, 20, map);
myEllipse.draw();

// Or use a LatLon location
var myEllipse2 = myCanvas.ellipse(new Telogis.GeoBase.LatLon(33.563259,-117.788995), 100, 20, map);
myEllipse2.draw();
Arguments

  • (Optional) center (Point or LatLon) - The pixel coordinates or location of the ellipse's center. Defaults to new Point(0, 0).

  • (Optional) radiusX (Number) - The length, in pixels, of half of the horizontal axis of the ellipse. Defaults to 0.

  • (Optional) radiusY (Number) - The length, in pixels, of half the vertical axis of the ellipse. Defaults to 0.

  • map (Widgets.Map) - The map on which to draw the ellipse.

Returns

Canvas.Shapes.Ellipse - The ellipse representing the new shape.

getCenterXY ()

Finds the center of the canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getCenterXY());
// 320x240
Returns

Point - The xy co-ordinates of the center of the canvas.

getFillColor ()

Finds the components of the default fill color for primitives constructed on this Canvas, if applicable.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getFillColor().toCSSRGBA());
// rgba(0,18,255,0.5)
Returns

Color - The RGB fill color, or null if filling is disabled.

getHeight ()

Finds the visible height of the canvas, excluding buffering.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getHeight());
// 480
Returns

Number - The visible height of the canvas area, in pixels.

getLineColor ()

Finds the components of the default stroke color for primitives constructed on this Canvas, if applicable.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getLineColor().toCSSRGBA());
// rgba(0,18,255,0.9)
Returns

Color - The RGB stroke color, or null if stroking is disabled.

getLineWidth ()

Finds the default stroke width for primitives constructed on this Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 4,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getLineWidth());
// 4
Returns

Number - The stroke width, in pixels.

getSize ()

Finds the visible width and height of the canvas, excluding buffering.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 4,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getSize());
// 640x480
Returns

Size - The visible dimensions of the canvas area, in pixels.

getWidth ()

Finds the visible width of the canvas, excluding buffering.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 4,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

alert(myCanvas.getWidth());
// 640
Returns

Number - The visible width of the canvas area, in pixels.

group (Array shapes)

Creates a Canvas.Group on this Canvas.

Arguments
image (Point point, String src, Widgets.Map map)

Creates an image on the Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

var myPoint = new Telogis.GeoBase.Point(200,200); // A relative point
var myLoc = new Telogis.GeoBase.LatLon(33.563259,-117.788995); // A fixed location

// Draw an image by specifying a point or location at which to render the image
// and a string path (absolute or relative to the page) to the image file
var myImage = myCanvas.image(myPoint,'http://localhost/GeoStream/scripts/images/pin-red.png', map);
myImage.draw();
Arguments

  • point (Point or LatLon) - The location at which the image will be drawn.

  • src (String) - The path to the image file.

  • map (Widgets.Map) - The map on which to draw the image.

Returns

Canvas.Shapes.image - The image that was created.

label (Point point, String text, Widgets.Map map)

Creates a label on the Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a label by specifying a point at which to render the label (relative to the
// top-left corner of the visible canvas) and a string containing plain text
var myLabel = myCanvas.label(new Telogis.GeoBase.Point(200,200),'Text Label to Display',map);
myLabel.draw();
Arguments

  • point (Point or LatLon) - The point or location at which the label will be centered.

  • text (String) - The label text.

  • map (Widgets.Map) - The map on which to draw the label.

Returns

Canvas.Shapes.label - The label representing the new shape.

line (Point start, Point end)

Creates a line segment on the Canvas as a polyline of only two points.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 4,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw an a line between two points relative to the upper-left corner of the canvas
var myLine = myCanvas.line(new Telogis.GeoBase.Point(100,100), new Telogis.GeoBase.Point(300,300));
myLine.draw();
Arguments

  • (Optional) start (Point) - The pixel coordinates of the first end-point of the line, relative to the upper-left corner of the visible canvas area. Defaults to new Point(0, 0).

  • (Optional) end (Point) - The pixel coordinates of the second end-point of the line, relative to the upper-left corner of the visible canvas area. Defaults to new Point(0, 0).

Returns

Canvas.Shapes.PolyLine - The polyline representing the line segment on the canvas.

path (Array commands)

creates an arbitrary figure on the Canvas.

Arguments

  • commands (Array) - The list of instructions describing the path. Each entry in this array should itself be an array whose first element is a Canvas instruction code (currently one of Canvas.COMMAND_MOVE, Canvas.COMMAND_LINE or Canvas.COMMAND_BEZIER) and whose successive entries are Point parameters associated with this command. In the case of Canvas.COMMAND_MOVE and Canvas.COMMAND_LINE, there should be one parameter: the destination of the action. If the command is Canvas.COMMAND_BEZIER, the arguments should consist of start and end control points, followed by the destination point.

polyline (Array points, Boolean closed, Widgets.Map map)

creates a polyline on the Canvas.

JavaScript
Copy
Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Create an array of points that will form the start, end and junctures
// of the line
var pt1 = new Telogis.GeoBase.Point(200,150);
var pt2 = new Telogis.GeoBase.Point(300,250);
var pt3 = new Telogis.GeoBase.Point(200,350);
var pointArray = [pt1, pt2, pt3];

// Or create an array of LatLon locations that will form the
// start, end and junctures of the line
var ll1 = new Telogis.GeoBase.LatLon(33.570967,-117.793688);
var ll2 = new Telogis.GeoBase.LatLon(33.571029,-117.779229);
var ll3 = new Telogis.GeoBase.LatLon(33.563794,-117.785815);
var locArray = [ll1,ll2, ll3];

// Draw the polyline, in this case connecting the first and last points
// to form a polygon (true)
var myPolyline = myCanvas.polyline(pointArray, true, map);
myPolyline.draw();
Arguments

  • (Optional) points (Array) - The list of Points or LatLons describing the end-points and junctions of the line segments comprising the Canvas.Shapes.PolyLine. Points are taken relative to the upper-left corner of the visible canvas area. Defaults to [].

  • (Optional) closed (Boolean) - Whether the last point of the polyline should be connected to its first point (forming a polygon. Defaults to false.

  • map (Widgets.Map) - The map on which to draw the polyline.

Returns

Canvas.Shapes.PolyLine - The polyline representing the new shape.

rect (Point p1, Point p2, Widgets.Map map)

Creates a rectangle on the Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a rectangle by specifying two points (the top-left and bottom-right corners)
var myRectangle = myCanvas.rect(new Telogis.GeoBase.Point(200,200),new Telogis.GeoBase.Point(230,230),map);
myRectangle.draw();
Arguments

  • p1 (Point or LatLon) - The pixel coordinates or location of the upper-left corner of the rectangle.

  • p2 (Point or LatLon) - The pixel coordinates or location of the lower-right corner of the rectangle.

  • map (Widgets.Map) - The map on which to draw the rectangle.

Returns

Canvas.Shapes.Ellipse - The ellipse representing the new shape.

remove (Telogis.GeoBase.AbstractShape shape)

Removes a given Telogis.GeoBase.AbstractShape from this Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw four circles on the canvas
var circle1 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);
circle1.draw();
var circle2 = myCanvas.circle(new Telogis.GeoBase.Point(200,300), 30);
circle2.draw();
var circle3 = myCanvas.circle(new Telogis.GeoBase.Point(300,200), 30);
circle3.draw();
var circle4 = myCanvas.circle(new Telogis.GeoBase.Point(300,300), 30);
circle4.draw();

// Call a test function when the canvas is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Remove two of the four circles from the canvas
    myCanvas.remove(circle1);
    myCanvas.remove(circle4);
};
Arguments

  • shape (Telogis.GeoBase.AbstractShape) - The shape to be removed from this Canvas.

setFillColor (Color color)

Specifies the default fill color for new primitives constructed on this Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle on the canvas using the current default fill color
var circle1 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);
circle1.draw();

// Specify a new default fill color
myCanvas.setFillColor(new Telogis.GeoBase.Color(255,156,0,0.5));
// use 'null' for no fill color >> myCanvas.setFillColor(null);

// Call a test function when the canvas is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Draw a new circle, using the new fill color
    var circle2 = myCanvas.circle(new Telogis.GeoBase.Point(200,300), 30);
    circle2.draw();
};
Arguments

  • color (Color) - The RGB description of the new default fill color, or null to disable filling.

setLineColor (Color color)

Specifies the default stroke color for new primitives constructed on this Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle on the canvas using the current default line color
var circle1 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);
circle1.draw();

// Specify a new default line color
myCanvas.setLineColor(new Telogis.GeoBase.Color(255,0,0,0.9));
// use 'null' for no fill color >> myCanvas.setLineColor(null);

// Call a test function when the canvas is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Draw a new circle, using the new line color
    var circle2 = myCanvas.circle(new Telogis.GeoBase.Point(200,300), 30);
    circle2.draw();
};
Arguments

  • color (Color) - The RGB description of the new default stroke color, or null to disable stroking.

setLineWidth (Number width)

Specifies the default stroke width for new primitives constructed on this Canvas.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle on the canvas using the current default line width (1)
var circle1 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);
circle1.draw();

// Specify a new default line width
myCanvas.setLineWidth(5);

// Call a test function when the canvas is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Draw a new circle, using the new line width (5)
    var circle2 = myCanvas.circle(new Telogis.GeoBase.Point(200,300), 30);
    circle2.draw();
};
Arguments

  • width (Number) - The pixel width to use for the default stroke.

setOffset (Point point)

Sets the offset of the Canvas, from its parent.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Create an image 300 pixels in and down from the top left-hand corner of the visible canvas.
var image1 = myCanvas.image(new Telogis.GeoBase.Point(300,300), 'http://localhost/GeoStream/scripts/images/pin-red.png');
image1.draw();

// Call a test function when the document is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Set a new canvas offset that moves the canvas 100 pixels up and to the left
    // relative to its parent
    myCanvas.setOffset(new Telogis.GeoBase.Point(100,100));

    // Call update() of the canvas. The image now reflects the updated canvas offset.
    // The icon moves up and to the left by 100 pixels, but its specified point
    // location (300,300) remains unchanged
    myCanvas.update();
};
Arguments

  • point (Point) - The amount to offset the canvas by from its parent.

setSize (Size size)

Changes the dimensions of the canvas and calls Canvas.update.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle on the canvas at 200x200 (from top-left corner)
// This is well within the current canvas size of 640x480
var circle1 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);
circle1.draw();

// What is the current canvas size?
alert('Canvas size is '+myCanvas.getSize()+'. Now click the canvas.' );
// 'Canvas size is 640x480. Now click the canvas.'

// Call a test function when the canvas is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Specify a new canvas size of 200x200. This function will also
    // call update(), removing the circle1 object
    myCanvas.setSize(new Telogis.GeoBase.Size(200,200));

    // What it the canvas size now?
    alert('Canvas size is now '+myCanvas.getSize()+'. Only one quarter of the circle is now visible.');
    // 'Canvas size is 200x200. Only one quarter of the circle is now visible.'

    // Redraw a circle at the same point (200x200) as the previous circle.
    // This is centered on the bottom-right corner of the new canvas. Only
    // 1/4 (top-left) will be visible as 3/4 is now off the edge of the canvas.
    var circle2 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);
    circle2.draw();
};
Arguments

  • (Optional) size (Size) - The dimensions to resize the canvas to. Defaults to this.getSize().

update ()

Updates each of the Canvas's primitive shapes to reflect any changes that have been made to their properties. This should be called manually after drawing changes.

JavaScript
Copy
// Create a Canvas instance on a parent DOM element (DIV 'main_map')
var myCanvas = new Telogis.GeoBase.Canvas({
    fillColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    id: 'new_canvas',
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.9),
    lineWidth: 1,
    parent: 'main_map', // DOM entity. In this example the DIV 'main_map'
    size: new Telogis.GeoBase.Size(640,480) // Not needed if already defined
});

// Draw a circle on the canvas at 200x200 (from top-left corner)
var circle1 = myCanvas.circle(new Telogis.GeoBase.Point(200,200), 30);

// Draw the circle
circle1.draw();

// Change the center of the circle to a new point. The circle remains unchanged.
circle1.center = new Telogis.GeoBase.Point(300,300);

// Call a test function when the document is clicked
document.onclick = myTestFunction;
function myTestFunction() {
    // Update the canvas to display the circle at its new position
    myCanvas.update();
};
Properties
NameTypeDescription
BEZIER_ARC_APPROXNumber

The control point magnitude that can be used to approximate an ellipse with cubic bezier curves when scaled by the appropriate radius.

COMMAND_BEZIERNumber

The enumerated value representing an instruction to draw a bezier curve in a Canvas.Shapes.Path.

COMMAND_LINENumber

The enumerated value representing an instruction to draw a line segment in a Canvas.Shapes.Path.

COMMAND_MOVENumber

The enumerated value representing an instruction to move the stroke pen in a Canvas.Shapes.Path.