Context2D

From Emitrom

Jump to: navigation, search

Back to Index


Context2D is a wrapper around the 2D rendering context of the HTML5 Canvas. Context2D is used in the draw method of Shapes.

Hand-point.png See section "The 2D rendering context" for a list of attributes and functions defined for this context.
Hand-point.png See Extending Lienzo on when you might use it.
Hand-point.png Context2D Javadoc

In the following sections, the parameters are of type double unless specified otherwise.

Contents

save and restore

The node structure in Lienzo is basically a tree of Nodes. ContainerNodes (such as Group) can have children, which are themselves Groups or Shapes. When drawing a node, you should first save the context, then set the desired attributes on the context and draw the shape, and then restore the context to the state it was in when it was saved.

E.g. imagine a Group node "G1" with two children, shape "A" and group "G2". G2 itself has two children "B" and "C". Here's a list of the functions that would be invoked. The indentation of tree structure indicates which function calls what.

G2.draw
  save // G2
    A.draw
      save // A
      draw details of A
      restore // A
    G1.draw
      save // G1
        B.draw
          save // B
          draw details of B
          restore // B
        C.draw
          save // C
          draw details of C
          restore // C
      restore // G1
  restore // G2

Drawing attributes

Function Notes
setFillColor(String)
setFillColor(IColor)
setStrokeColor(String)
setStrokeColor(IColor)
setStrokeWidth(w)
setLineCap(LineCap)
setLineJoin(LineJoin)
setFillGradient(LinearGradient)
setFillGradient(RadialGradient)
setFillGradient(PatternGradient)
setTextFont(String)
setTextBaseline(TextBaseLine)
setTextAlign(TextAlign)
setGlobalAlpha(alpha)
setShadow(Shadow)
setGlobalCompositeOperation(CompositeOperation)

Transformation related methods

Function Notes
transform(Transform)
translate(x, y)
rotate(rot) in radians
scale(sx, sy)

Hand-point.png See also Shape Transformations Hand-point.png Transform

Drawing methods

Function Notes
beginPath()
closePath()
fill()
stroke()
moveTo(x,y)
lineTo(x,y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
quadraticCurveTo(cpx, cpy, x, y)
rect(x, y, w, h)
arc(x, y, radius, startAngle, endAngle, antiClockwise)
arc(x, y, radius, startAngle, endAngle)
The second function calls the first with antiClockwise=false.
fillText(String text, x, y)
strokeText(String text, x, y)
clearRect(x, y, width, height)

Image related methods

Function Notes
getImageDataPixelColor(int x, int y)
getImageData(int x, int y, int width, int height)
putImageData(ImageData imageData, int x, int y)
putImageData(ImageData imageData, int x, int y, int dirtyX, int dirtyY, int dirtyWidth, int dirtyHeight)
drawImage(ImageJSO image, w, h)
drawImage(ImageJSO image, x, y, w, h)
drawImage(ImageJSO image, sx, sy, sw, sh, x, y, w, h)
drawImage(Element image, x, y)
drawImage(Element image, x, y, w, h)
drawImage(Element image, sx, sy, sw, sh, x, y, w, h)

Miscellaneous methods

Function Notes
isSupported(String feature)
isPointInPath(x, y)
TextMetrics measureText(String text) Hand-point.png See TextMetrics
isSelection()
isDrag()
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox