ep.canvas()
Categories: Plugins (Canvas API)
ep.canvas()
Plugin: ep.canvas
Description: Create a HTML5 canvas element.
-
ep.canvas()
version added: 6.14.0
The ep.canvas()
function creates canvas elements which also work in older browsers without
native canvas support (like the Internet Explorer 7 and 8). Therefor the excanvas and canvastext
plugins are used.
The plugin offers the default methods and attributes from the canvas api and a multiline text drawing method.
-
Create a canvas and draw on it
Code:
$('<canvas />') .appendTo('body') .canvas() .fillStyle('#4E8DA6') .fillRect(10, 10, 200, 100) .strokeStyle('#F2EA79') .lineWidth(5) .lineJoin('round') .strokeRect(10, 10, 200, 100) .fillStyle('#011C40') .multiline({ x: 40, y: 40, phi: 15, text: "Hello World", fontSize: 22, fontFamily: "Arial", align: 'center', delimiter: "\n", rp: 'c', style: 'fillText' });
-
fillStyle
-
.fillStyle( [value] )
version added: 6.14.0value A value to define the color or style.
Setter and getter method to define the fill color or style of a shape or text.
Possible color formats: - color name as string - rgb(a) - hex
-
-
strokeStyle
-
.strokeStyle( [value] )
version added: 6.14.0value A value to define the color or style.
Setter and getter method to define the stroke color or style of a shape or text.
Possible color formats: - color name as string - rgb(a) - hex
-
-
lineWidth
-
.lineWidth( [value] )
version added: 6.14.0value The width of the stroke being drawed.
Setter and getter method to define the width of a stroke.
-
-
lineCap
-
.lineCap( [value] )
version added: 6.14.0value The style of the ending of the line (possible values: butt, round, square).
Setter and getter method to define the style of the ending of a line.
-
-
lineJoin
-
.lineJoin( [value] )
version added: 6.14.0value The style of the corners of the line (possible values: bevel, round, miter).
Setter and getter method to define the style of the corners of a line.
-
-
globalAlpha
-
.globalAlpha( [value] )
version added: 6.14.0value The value of the transparency.
Setter and getter method to define the transparency of a drawing.
-
-
globalCompositeOperation
-
.globalCompositeOperation( [value] )
version added: 6.14.0value The position on the canvas (possible values: source-atop, source-in, source-out,source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor,vendorName-operationName) .
Setter and getter method to define how shapes and drawings are positioned onto the canvas.
-
-
shadowOffsetX
-
.shadowOffsetX( [value] )
version added: 6.14.0value The horizontal distance of the shadow.
Setter and getter method to define the horizontal distance of a shadow.
-
-
shadowOffsetY
-
.shadowOffsetY( [value] )
version added: 6.14.0value The vertical distance of the shadow.
Setter and getter method to define the vertical distance of a shadow.
-
-
shadowBlur
-
.shadowBlur( [value] )
version added: 6.14.0value The size of the blurring effect.
Setter and getter method to define the size of the blurring effect.
-
-
shadowColor
-
.shadowColor( [value] )
version added: 6.14.0value The color of the shadow.
Setter and getter method to define the color of a shadow.
-
-
miterLimit
-
.miterLimit( [value] )
version added: 6.14.0value The limit size of the corners in a line.
Setter and getter method to define the limit size of the corners in a line.
-
-
font
-
.font( [value] )
version added: 6.14.0value The font properties used for writing on the canvas.
Setter and getter method to define the font properties used for writing on the canvas.
-
-
fillRect
-
.fillRect( x, y, width, height )
version added: 6.14.0x The x-coordinate of where to place the upperleft corner of the rectangle.
y The y-coordinate of where to place the upperleft corner of the rectangle.
width The width of the rectangle, in pixels.
height The height of the rectangle, in pixels.
Draws a filled rectangle using the color/style of the fillStyle attribute.
-
-
strokeRect
-
.strokeRect( x, y, width, height )
version added: 6.14.0x The x-coordinate of where to place the upperleft corner of the rectangle.
y The y-coordinate of where to place the upperleft corner of the rectangle.
width The width of the rectangle, in pixels.
height The height of the rectangle, in pixels.
Draws the lines of a rectangle using the color/style of the strokeStyle attribute.
-
-
clearRect
-
.clearRect( x, y, width, height )
version added: 6.14.0x The x-coordinate of where to place the upperleft corner of the rectangle.
y The y-coordinate of where to place the upperleft corner of the rectangle.
width The width of the rectangle, in pixels.
height The height of the rectangle, in pixels.
Clears a rectangle area. All pixels inside this area will be erased.
-
-
drawImage
-
.drawImage( img, x, y, [width], [height], [dx], [dy], [dwidth], [dheight] )
version added: 6.14.0img The image object to use in the drawing.
x The x coordinate of where to position the top-left corner of the image.
y The y coordinate of where to position the top-left corner of the image.
width The width of the drawing (image), in pixels.
height The height of the drawing (image), in pixels.
dx The x coordinate of where to position the clipped part of the image.
dy The y coordinate of where to position the clipped part of the image.
dwidth The width of the clipped part of the image, in pixels.
dheight The height of the clipped part of the image, in pixels.
Draws an image onto the canvas.
-
-
fillText
-
.fillText( text, x, y, [maxWidth] )
version added: 6.14.0text The text that will be written on the canvas.
x The canvas' x-coordinate of where to place the text.
y The canvas' y-coordinate of where to place the text.
maxWidth The maximum allowed width of the text, in pixels.
Draws text on the canvas and fills it with the color set by the fillStyle attribute.
-
-
strokeText
-
.strokeText( text, x, y, [maxWidth] )
version added: 6.14.0text The text that will be written on the canvas.
x The canvas' x-coordinate of where to place the text.
y The canvas' y-coordinate of where to place the text.
maxWidth The maximum allowed width of the text, in pixels.
Draws text on the canvas, without filling, using the color set by the strokeStyle attribute.
-
-
measureText
-
.measureText( text ).width
version added: 6.14.0text The text that will be measured.
Measures the given text string, returns the result in pixels.
-
-
rotate
-
.rotate( angle )
version added: 6.14.0angle The value of the angle in degree.
Rotates the drawings based on the given angle.
-
-
scale
-
.scale( x, y )
version added: 6.14.0x The scaling factor of the the width.
y The scaling factor of the the height.
Scales the drawings based on the x and y parameters.
-
-
translate
-
.translate( x, y )
version added: 6.14.0x Moves the canvas horizontally to the given coordinate.
y Moves the canvas vertically to the given coordinate.
Moves the drawings horizontally and vertically.
-
-
save
-
.save()
version added: 6.14.0
Pushes the current state onto the stack.
-
-
restore
-
.restore()
version added: 6.14.0
Pops the top state on the stack, restoring the context to that state.
-
-
createLinearGradient
-
.createLinearGradient( x0, y0, x1, y1 )
version added: 6.14.0x0 The x-coordinate of the start of the gradient.
y0 The y-coordinate of the start of the gradient.
x1 The x-coordinate of the end of the gradient.
y1 The y-coordinate of the end of the gradient.
Creates a gradient object. Use this object as a value to the strokeStyle or fillStyle attributes.
-
-
createRadialGradient
-
.createRadialGradient( x0, y0, r0, x1, y1, r1 )
version added: 6.14.0x0 The x-coordinate of the start of the gradient.
y0 The y-coordinate of the start of the gradient.
r0 The radius of the start-circle of the gradient.
x1 The x-coordinate of the end of the gradient.
y1 The y-coordinate of the end of the gradient.
r1 The radius of the start-circle of the gradient.
Creates a gradient object as a circle. Use this object as a value to the strokeStyle or fillStyle attributes.
-
-
createPattern
-
.createPattern( img, repeat )
version added: 6.14.0img The image object to use when creating the pattern.
repeat Describes how the pattern will be repeated (possible values: repeat, repeat-x, repeat-y, no-repeat).
Creates a pattern from an image to be used by the fillStyle or strokeStyle attributes.
-
-
getImageData
-
.getImageData( x, y, width, height )
version added: 6.14.0x The x coordinate, in the canvas, of the rectangle-area you will get.
y The y coordinate, in the canvas, of the rectangle-area you will get.
width The width of the rectangle-area you will get.
height The height of the rectangle-area you will get.
Creates a new imagedata object, containing data from the canvas.
-
-
putImageData
-
.putImageData( imgData, x, y, [dirtyX], [dirtyY], [dirtyWidth], [dirtyHeight] )
version added: 6.14.0imgData The imagedata object to put on the canvas.
x The x coordinate, in the canvas, of where to put the drawings.
y The y coordinate, in the canvas, of where to put the drawings.
dirtyX The x coordinate, of the drawings you want to put onto the canvas.
dirtyY The y coordinate, of the drawings you want to put onto the canvas.
dirtyWidth The width of the drawings you want to put onto the canvas.
dirtyHeight The height of the drawings you want to put onto the canvas.
Draws imagedata onto the canvas.
-
-
arc
-
.arc( x, y, r, sAngle, eAngle, [clockwise] )
version added: 6.14.0x The x-coordinate of the center of the circle.
y The y-coordinate of the center of the circle.
r The radius of the circle.
sAngle Specifies where in the circle's angle the drawing should start.
eAngle Specifies where in the circle's angle the drawing should end.
clockwise Specifies whether the drawing should be clockwise or not.
Creates a circle, or parts of a circle.
-
-
arcTo
-
.arcTo( x1, y1, x2, y2, r )
version added: 6.14.0x1 The x-coordinate of the beginning of the arc.
y1 The y-coordinate of the beginning of the arc.
x2 The x-coordinate of the end of the arc.
x2 The y-coordinate of the end of the arc.
r The radius of the arc.
Creates an arc between two points.
-
-
beginPath
-
.beginPath()
version added: 6.14.0
Starts a new path, or clears the current path.
-
-
bezierCurveTo
-
.bezierCurveTo( cp1x, cp1y, cp2x, cp2y, x, y )
version added: 6.14.0x1 The x-coordinate of the first controlpoint.
y1 The y-coordinate of the first controlpoint.
x2 The x-coordinate of the second controlpoint.
y2 The y-coordinate of the second controlpoint.
x The x-coordinate of where to create the line to.
y The y-coordinate of where to create the line to.
Creates a cubic Bezier curve from the current point in the path to the specified path.
-
-
clip
-
.clip()
version added: 6.14.0
Creates an area in the canvas, and this area is the only visible area in the canvas.
-
-
closePath
-
.closePath()
version added: 6.14.0
Creates a line (path) from the last point in the path, to the first point. Completes the path.
-
-
fill
-
.fill()
version added: 6.14.0
Fills the current path with the selected colorh.
-
-
isPointInPath
-
.isPointInPath( x, y )
version added: 6.14.0x The x-coordinate of the point.
y The y-coordinate of the point.
Returns a Boolean value,
true
if the specified point is in the path, otherwisefalse
. -
-
lineTo
-
.lineTo( x, y )
version added: 6.14.0x The x-coordinate of where to create the line to.
y The y-coordinate of where to create the line to.
Creates a line from the last point in the path to the given point.
-
-
moveTo
-
.moveTo( x, y )
version added: 6.14.0x The x-coordinate of where to move the path to.
y The y-coordinate of where to move the path to.
Moves the path to the specified point, without creating a line.
-
-
quadraticCurveTo
-
.quadraticCurveTo( cpx, cpy, x, y )
version added: 6.14.0cpx The x-coordinate of the controlpoint.
cpy The y-coordinate of the controlpoint.
x The x-coordinate of where to create the line to.
y The y-coordinate of where to create the line to.
Creates a quadratic Bezier curve from the current point in the path to the specified path.
-
-
rect
-
.rect( x, y, width, height )
version added: 6.14.0x The canvas' x-coordinate of where to place the upperleft corner of the rectangle.
y The canvas' y-coordinate of where to place the upperleft corner of the rectangle.
width The width of the rectangle, in pixels.
height The height of the rectangle, in pixels.
Creates a rectangle.
-
-
stroke
-
.stroke()
version added: 6.14.0
Creates a stroke/path described with the specified path methodse.
-
-
toDataURL
-
.toDataURL( [type], [index] )
version added: 6.14.0type The type of the image that will be generated.
index The index of the canvas from which the image that will be generated.
Returns the content of the current canvas as an image. In browsers with no native canvas support it returns
undefined
. -
-
calcTextDimensions
-
.calcTextDimensions( options )
version added: 6.14.0x The canvas' x-coordinate of where to place the text.
y The canvas' y-coordinate of where to place the text.
text The text that will be written on the canvas.
style The style of the text that will be written on the canvas (possible values: fillText, strokeText).
fontSize The font size the text that will be written on the canvas.
fontFamily The font family of the text that will be written on the canvas.
fontUnit The font unit of the text that will be written on the canvas.
phi The rotation angle (in degree) of the text that will be written on the canvas.
rp The point around the text will be rotated (possible values: nw, n, ne, w, c (default), e, sw, s, se).
delimiter The delimiter used to detect a new line.
align The text align of the text that will be written on the canvas.
maxWidth The maximal width of the text drawing.
maxHeight The maximal height of the text drawing.
resizeCanvas A boolean that defines whether a text will be scaled if the maximum size is reached.
resizable A boolean that defines whether a text will be trimmed if the maximum size is reached .
correctLineHeight An offset to correct the line height.
Calculates the size of a text.
-
-
multiline
-
.multiline( options )
version added: 6.14.0x The canvas' x-coordinate of where to place the text.
y The canvas' y-coordinate of where to place the text.
text The text that will be written on the canvas.
style The style of the text that will be written on the canvas (possible values: fillText, strokeText).
fontSize The font size the text that will be written on the canvas.
fontFamily The font family of the text that will be written on the canvas.
fontUnit The font unit of the text that will be written on the canvas.
phi The rotation angle (in degree) of the text that will be written on the canvas.
rp The point around the text will be rotated (possible values: nw, n, ne, w, c (default), e, sw, s, se).
delimiter The delimiter used to detect a new line.
align The text align of the text that will be written on the canvas.
correctLineHeight An offset to correct the line height.
Draws a multiline text onto the selected canvas elements.
-