Skip to main content

Util

Own Methods​

getRandomColor()​

return random hex color

Example:

shape.fill(Konva.Util.getRandomColor());

isCanvasFarblingActive()​

Check if canvas farbling is active (e.g., Brave browser fingerprinting protection)

Returns: Boolean

getHitColor()​

Get a random color for hit detection (normalized if farbling is active)

Returns: String hex color string

getHitColorKey(r, g, b)​

Get hit color key from RGB values (normalized if farbling is active)

Parameters:

  • r (Number): red component (0-255)
  • g (Number): green component (0-255)
  • b (Number): blue component (0-255)

Returns: String hex color key string

getSnappedHexColor(hex)​

Snap hex color values to end with 0 (normalize for canvas farbling)

Parameters:

  • hex (String): hex color string (e.g., "#ff00ff")

Returns: String normalized hex color string

getRGB(color)​

get RGB components of a color

Parameters:

  • color (String)

Example:

// each of the following examples return {r:0, g:0, b:255}
var rgb = Konva.Util.getRGB('blue');
var rgb = Konva.Util.getRGB('#0000ff');
var rgb = Konva.Util.getRGB('rgb(0,0,255)');

haveIntersection(r1, r2)​

check intersection of two client rectangles

Parameters:

  • r1 (Object): { x, y, width, height } client rectangle
  • r2 (Object): { x, y, width, height } client rectangle

Example:

const overlapping = Konva.Util.haveIntersection(shape1.getClientRect(), shape2.getClientRect());