Context2D

From Emitrom

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.

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

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

Contents 1 save and restore 2 Drawing attributes 3 Transformation related methods 4 Drawing methods 5 Image related methods 6 Miscellaneous methods

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)

See also Shape Transformations 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)	See TextMetrics
isSelection()
isDrag()