External: CanvasRenderingContext2D

CanvasRenderingContext2D

The built-in 2D rendering context for the drawing surface of a canvas.

See:

Methods


dashedLineTo(fromX, fromY, toX, toY, pattern)

Deprecated since 7.4.0. Use native CanvasRenderingContext2D methods such as moveTo(), lineTo() and setLineDash() instead.

Dashed line polyfill for the canvas. Note that dashed lines are expensive operations when not supported natively. See external:CanvasRenderingContext2D#stxLine.

Parameters:
Name Type Description
fromX number

Starting point of the X-axis.

fromY number

Starting point of the Y-axis.

toX number

Destination on the X-axis.

toY number

Destination on the Y-axis.

pattern Array.<string>

Array of stroke patterns.

Deprecated:
  • As of 7.4.0. Use native CanvasRenderingContext2D methods such as moveTo(), lineTo() and setLineDash() instead.
Example

Native CanvasRenderingContext2D methods used to draw a horizontal dashed line across the center of the screen:

var canvas = stxx.chart.backgroundCanvas;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.setLineDash([10, 10]);
ctx.moveTo(0, canvas.height / 2);
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();

stxCircle(x, y, radius, filled)

Deprecated since 7.4.0. Use native CanvasRenderingContext2D methods such as arc() instead.

Add native circle drawing to the canvas.

Parameters:
Name Type Description
x number

X-axis position of the center of the circle.

y number

Y-axis position of the center of the circle.

radius number

Radius of the circle.

filled boolean

If true, then the circle is filled.

Deprecated:
  • As of 7.4.0. Use native CanvasRenderingContext2D methods such as arc() instead.
Example

Native CanvasRenderingContext2D methods used to draw a red circle in the center of the screen:

var canvas = stxx.chart.backgroundCanvas;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);
ctx.fill();

stxLine(fromX, fromY, toX, toY, color, opacity, lineWidth [, pattern])

Deprecated since 7.4.0. Use native CanvasRenderingContext2D methods such as moveTo() and lineTo() instead.

Convenience function for rendering lines of various types on the canvas.

Parameters:
Name Type Argument Description
fromX number

Starting point of the X-axis.

fromY number

Starting point of the Y-axis.

toX number

Destination on the X-axis.

toY number

Destination on the Y-axis.

color string

CSS-compatible color, such as hex, rgb, rgba or even color names such as "orange".

opacity number

The alpha. A number between 0 and 1.

lineWidth number

The line width in pixels.

pattern Array.<number> <optional>

An array that contains the number of pixels on and then the number of pixels off. For instance [1,1] would create a dotted pattern by turning one pixel on and then one pixel off repeatedly.

Deprecated:
  • As of 7.4.0. Use native CanvasRenderingContext2D methods such as moveTo() and lineTo() instead.
Example

Native CanvasRenderingContext2D methods used to draw a thick blue line diagonally across the screen:

var canvas = stxx.chart.backgroundCanvas;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();