Categories

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.0

      value   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.0

      value   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.0

      value   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.0

      value   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.0

      value   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.0

      value   The value of the transparency.

    Setter and getter method to define the transparency of a drawing.

  • globalCompositeOperation

    • .globalCompositeOperation( [value] )

      version added: 6.14.0

      value   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.0

      value   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.0

      value   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.0

      value   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.0

      value   The color of the shadow.

    Setter and getter method to define the color of a shadow.

  • miterLimit

    • .miterLimit( [value] )

      version added: 6.14.0

      value   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.0

      value   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.0

      x   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.0

      x   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.0

      x   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.0

      img   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.0

      text   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.0

      text   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.0

      text   The text that will be measured.

    Measures the given text string, returns the result in pixels.

  • rotate

    • .rotate( angle )

      version added: 6.14.0

      angle   The value of the angle in degree.

    Rotates the drawings based on the given angle.

  • scale

    • .scale( x, y )

      version added: 6.14.0

      x   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.0

      x   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.0

      x0   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.0

      x0   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.0

      img   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.0

      x   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.0

      imgData   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.0

      x   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.0

      x1   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.0

      x1   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.0

      x   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, otherwise false.

  • lineTo

    • .lineTo( x, y )

      version added: 6.14.0

      x   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.0

      x   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.0

      cpx   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.0

      x   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.0

      type   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.0

      x   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.0

      x   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.