/**
* @author Sergey Chikuyonok (sc@design.ru)
* @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
*/
/**
* Элемент <canvas>
*
* @class
*/
function HTMLCanvasElement() {
}
HTMLCanvasElement.prototype = new HTMLElement();
/**
* Ширина холста
*
* @type {Number}
*/
HTMLCanvasElement.prototype.width = 0;
/**
* Высота холста
*
* @type {Number}
*/
HTMLCanvasElement.prototype.height = 0;
/**
* Returns a data: URL containing a representation of the image as a PNG
* file
*
* @return {String}
*/
HTMLCanvasElement.prototype.toDataURL = function() {
}
/**
* Returns a reference to drawing context
*
* @param {String}
* contextId ID of context (only "2d" is supported)
* @return {CanvasRenderingContext2D}
*/
HTMLCanvasElement.prototype.getContext = function(contextId) {
}
/**
* The 2D context, representing a flat Cartesian surface whose origin (0,0) is
* at the top left corner, with the coordinate space having x values increasing
* when going right, and y values increasing when going down.
*/
function CanvasRenderingContext2D() {
}
CanvasRenderingContext2D.prototype = {
/**
* Back-reference to the canvas
*
* @type {HTMLCanvasElement}
*/
canvas : {},
/**
* Push current state on state stack
*/
save : function() {
},
/**
* Pop state stack and restore state
*/
restore : function() {
},
/**
* Add the scaling transformation described by the arguments to the
* transformation matrix. The x
argument represents the scale
* factor in the horizontal direction and the y
argument
* represents the scale factor in the vertical direction. The factors are
* multiples.
*
* @param {Number}
* x
* @param {Number}
* y
*/
scale : function(x, y) {
},
/**
* Add the rotation transformation described by the argument to the
* transformation matrix. The angle
argument represents a
* clockwise rotation angle expressed in radians.
*
* @param {Number}
* angle Angle in radians
*/
rotate : function(angle) {
},
/**
* Add the translation transformation described by the arguments to the
* transformation matrix. The x
argument represents the
* translation distance in the horizontal direction and the y
* argument represents the translation distance in the vertical direction.
* The arguments are in coordinate space units.
*
* @param {Number}
* x
* @param {Number}
* y
*/
translate : function(x, y) {
},
/**
* Multiply the current transformation matrix with the matrix described by:
* m11 m21 dx
* m12 m22 dy
* 0 0 1
*
* @param {Number}
* m11
* @param {Number}
* m12
* @param {Number}
* m21
* @param {Number}
* m22
* @param {Number}
* dx
* @param {Number}
* dy
*/
transform : function(m11, m12, m21, m22, dx, dy) {
},
/**
* Reset the current transform to the identity matrix, and then invoke the
* transform(m11, m12, m21, m22, dx, dy)
method with the same
* arguments.
*
* @see CanvasRenderingContext2D#transform
* @param {Number}
* m11
* @param {Number}
* m12
* @param {Number}
* m21
* @param {Number}
* m22
* @param {Number}
* dx
* @param {Number}
* dy
*/
setTransform : function(m11, m12, m21, m22, dx, dy) {
},
/**
* The globalAlpha
attribute gives an alpha value that is
* applied to shapes and images before they are composited onto the canvas.
* The value must be in the range from 0.0 (fully transparent) to 1.0 (no
* additional transparency). If an attempt is made to set the attribute to a
* value outside this range, the attribute must retain its previous value.
* When the context is created, the globalAlpha
attribute
* must initially have the value 1.0.
*
* @type {Number}
*/
globalAlpha : 1.0,
/**
* The globalCompositeOperation attribute sets how shapes and images are
* drawn onto the existing bitmap, once they have had
* globalAlpha
and the current transformation matrix applied.
* It must be set to a value from the following list. In the descriptions
* below, the source image, A, is the shape or image being rendered, and the
* destination image, B, is the current state of the bitmap.
*
* source-atop : A atop B. Display the source image wherever both
* images are opaque. Display the destination image wherever the destination
* image is opaque but the source image is transparent. Display transparency
* elsewhere.
* source-in : A in B. Display the source image wherever both the
* source image and destination image are opaque. Display transparency
* elsewhere.
* source-out : A out B. Display the source image wherever the
* source image is opaque and the destination image is transparent. Display
* transparency elsewhere.
* source-over (default) : A over B. Display the source image
* wherever the source image is opaque. Display the destination image
* elsewhere.
* destination-atop : B atop A. Same as source-atop but
* using the destination image instead of the source image and vice versa.
* destination-in : B in A. Same as source-in but using the
* destination image instead of the source image and vice versa.
* destination-out : B out A. Same as source-out, but using
* the destination image instead of the source image and vice versa.
* destination-over : B over A. Same as source-over but
* using the destination image instead of the source image and vice versa.
*
* lighter A plus B. Display the sum of the source image and
* destination image, with color values approaching 1 as a limit.
* copy : A (B is ignored). Display the source image instead of the
* destination image.
* xor : A xor B. Exclusive OR of the source image and destination
* image.
*
*
* @type {String}
*/
globalCompositeOperation : 'source-over',
/**
* Represents the color or style to use for the lines around shapes. Can be
* either string (CSS color value), CanvasGradient
,
* or CanvasPattern
.
*
* @type {String|CanvasGradient|CanvasPattern}
*/
strokeStyle : '#000000',
/**
* Represents the color or style to use inside the shapes. Can be either
* string (CSS color value), CanvasGradients
, or
* CanvasPatterns
.
*
* @type {String|CanvasGradient|CanvasPattern}
*/
fillStyle : '#ffffff',
/**
* Takes four arguments that represent the start point (x0
,
* y0
) and end point (x1
, y1
)
* and creates linear gradient
*
* @param {Number}
* x0 Start point X
* @param {Number}
* y0 Start point Y
* @param {Number}
* x1 End point X
* @param {Number}
* y1 End point Y
* @return {CanvasGradient}
*/
createLinearGradient : function(x0, y0, x1, y1) {
},
/**
* Takes six arguments, the first three representing the start circle with
* origin (x0
, y0
) and radius
* r0
, and the last three representing the end circle with
* origin (x1
, y1
) and radius
* r1
and creates radial gradient
*
* @param {Number}
* x0 Start circle origin X
* @param {Number}
* y0 Start circle origin Y
* @param {Number}
* r0 Start circle radius
* @param {Number}
* x1 End circle origin X
* @param {Number}
* y1 End circle origin Y
* @param {Number}
* r1 End circle radius
* @return {CanvasGradient}
*/
createRadialGradient : function(x0, y0, r0, x1, y1, r1) {
},
/**
* Creates image pattern
*
* @param {Image|HTMLImageElement|HTMLCanvasElement}
* image
* @param {String}
* repetition Pattern repetition: 'repeat' (default), 'repeat-x',
* 'repeat-y', 'no-repeat'
* @return {CanvasPattern}
*/
createPattern : function(image, repetition) {
},
/**
* Width of shape lines, in coordinate space units
*
* @type {Number}
*/
lineWidth : 1,
/**
* Defines the type of endings on the end of lines. The three valid values
* are:
*
* butt : the end of each line has a flat edge perpendicular to the
* direction of the line (no additional line cap is added)
* round : a semi-circle with the diameter equal to the width of the
* line added on to the end of the line.
* square : a rectangle with the length of the line width and the
* width of half the line width, placed flat against the edge perpendicular
* to the direction of the line, added at the end of each line.
*
* @type {String}
*/
lineCap : 'butt',
/**
* Defines the type of corners that will be placed where two lines meet. The
* three valid values are 'bevel', 'round', and 'miter' (default).
*
* @type {String}
*/
lineJoin : 'miter',
/**
* The miter limit ratio
*
* @type {Number}
*/
miterLimit : 10,
/**
* Sets the color of the shadow in CSS color notation
*
* @type {String}
*/
shadowColor : '#000000',
/**
* The distance that the shadow will be offset in the positive horizontal
* direction
*
* @type {Number}
*/
shadowOffsetX : 0,
/**
* The distance that the shadow will be offset in the positive vertical
* direction
*
* @type {Number}
*/
shadowOffsetY : 0,
/**
* Size of the blurring effect
*
* @type {Number}
*/
shadowBlur : 0,
/**
* Clear the pixels in the specified rectangle that also intersect the
* current clipping region to a fully transparent black, erasing any
* previous image. If either height or width are zero, this method has no
* effect.
*
* @param {Number}
* x X-coordinate of rectangle
* @param {Number}
* y Y-coordinate of rectangle
* @param {Number}
* w Width of rectangle
* @param {Number}
* h Height of rectangle
*/
clearRect : function(x, y, w, h) {
},
/**
* Paint the specified rectangular area using the fillStyle
*
* @param {Number}
* x X-coordinate of rectangle
* @param {Number}
* y Y-coordinate of rectangle
* @param {Number}
* w Width of rectangle
* @param {Number}
* h Height of rectangle
*/
fillRect : function(x, y, w, h) {
},
/**
* Stroke the specified rectangle's path using the strokeStyle
,
* lineWidth
, lineJoin
, and (if appropriate)
* miterLimit
attributes
*
* @param {Number}
* x X-coordinate of rectangle
* @param {Number}
* y Y-coordinate of rectangle
* @param {Number}
* w Width of rectangle
* @param {Number}
* h Height of rectangle
*/
strokeRect : function(x, y, w, h) {
},
/**
* Empty the list of subpaths so that the context once again has zero
* subpaths.
*/
beginPath : function() {
},
/**
* Create a new subpath with the specified point as its first (and only)
* point.
*
* @param {Number}
* x
* @param {Number}
* y
*/
moveTo : function(x, y) {
},
/**
* Mark the last subpath as closed, create a new subpath whose first point
* is the same as the previous subpath's first point, and finally add this
* new subpath to the path.
*/
closePath : function() {
},
/**
* Connect the last point in the subpath to the given point using a straight
* line, and must then add the given point to the subpath.
*
* @param {Number}
* x
* @param {Number}
* y
*/
lineTo : function(x, y) {
},
/**
* Connect the last point in the subpath to the given point (x, y) using a
* quadratic Bézier curve with control point (cpx, cpy), and must then add
* the given point (x, y) to the subpath
*
* @param {Number}
* cpx
* @param {Number}
* cpy
* @param {Number}
* x
* @param {Number}
* y
*/
quadraticCurveTo : function(cpx, cpy, x, y) {
},
/**
* Connect the last point in the subpath to the given point (x, y) using a cubic Bézier curve with control points (cp1x, cp1y) and (cp2x, cp2y). Then, it must add the point (x, y) to the subpath.
* @param {Number} cp1x
* @param {Number} cp1y
* @param {Number} cp2x
* @param {Number} cp2y
* @param {Number} x
* @param {Number} y
*/
bezierCurveTo: function(cp1x, cp1y, cp2x, cp2y, x, y){},
/**
* Draw arc of radius radiys
at point (x
, y
), starting from angle startAngle
* and ending in endAngle
* @param {Number} x
* @param {Number} y
* @param {Number} radius
* @param {Number} startAngle Start angle in radians
* @param {Number} endAngle End angle in radians
* @param {Boolean} anticlockwise Drawing direction
*/
arcTo: function(x, y, radius, startAngle, endAngle, anticlockwise){},
/**
* Creates four closed subpaths as rectangle
* @param {Number} x
* @param {Number} y
* @param {Number} w
* @param {Number} h
*/
rect: function(x, y, w, h){},
/**
* Fill all the subpaths of the current path using fillStyle
*/
fill: function(){},
/**
* Strokes all the subpaths with strokeStyle
*/
stroke: function(){},
/**
* Create a new clipping region by calculating the intersection of the current clipping region and the area described by the current path
*/
clip: function(){},
/**
* Check if the point given by the x and y coordinates is inside the current path
* @param {Number} x
* @param {Number} y
*/
isPointInPath: function(x, y){},
/**
* Draw image on canvas
* Alternative:
* drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
* @param {HTMLImageElement|HTMLCanvasElement|Image} image Image to draw
* @param {Number} dx Destination X
* @param {Number} dy Destination Y
* @param {Number} [dw] Destination width
* @param {Number} [dh] Destination height
*/
drawImage: function(image, dx, dy, dw, dh){}
};
/**
* @class
*/
function CanvasGradient(){};
CanvasGradient.prototype = {
/**
* Adds a new stop to a gradient
* @param {Number} offset Color stop offset (from 0 to 1)
* @param {String} color Color in CSS color notation
*/
addColorStop: function(offset, color){}
};
/**
* @class
*/
function CanvasPattern(){}