jdenticon.drawIcon()

Renders an indenticon at position (0, 0) onto an HTML canvas context.

jdenticon.drawIcon(ctx, hash|value, size[, config])

Examples

In the following example drawIcon is used to render multiple icons onto a single canvas. setTransform is used to set absolute coordinates where the icon is rendered.

Render multiple icons on a canvas

<canvas id="identicons" width="200" height="200">
</canvas>

<script src="https://cdn.jsdelivr.net/npm/jdenticon@3.2.0/dist/jdenticon.min.js"
        integrity="sha384-yBhgDqxM50qJV5JPdayci8wCfooqvhFYbIKhv0hTtLvfeeyJMJCscRfFNKIxt43M"
        crossorigin="anonymous">
</script>
<script>
    var ctx = document.getElementById("identicons").getContext("2d");
    
    // Render "icon 1" at position 20, 20
    ctx.setTransform(1, 0, 0, 1, 20, 20);
    jdenticon.drawIcon(ctx, "icon 1", 60);
    
    // Render "icon 2" at position 90, 20
    ctx.setTransform(1, 0, 0, 1, 90, 20);
    jdenticon.drawIcon(ctx, "icon 2", 60);
    
    // Render "icon 3" at position 55, 50
    ctx.setTransform(1, 0, 0, 1, 55, 50);
    jdenticon.drawIcon(ctx, "icon 3", 60);
    
    // Restore identity transform
    ctx.setTransform(1, 0, 0, 1, 0, 0);
</script>

Parameters

ctx specifies the 2D canvas context onto which the icon will be rendered.

size defines the width and height, icons are always square, of the icon in pixels, including padding.

hash|value is considered a hash string if the string is hexadecimal and contains at least 11 characters. It is otherwise considered a value that will be hashed using SHA1.

config (from v2.2.0) specifies an optional configuration object. If no configuration is specified, the global configuration is used. For backward compability this parameter can also be a padding value in the range 0.0 to 0.5.

Remarks

The following priority order is used to resolve the icon configuration when the icon is drawn:

1. config parameter passed to drawIcon()
2. Configuration object passed to jdenticon.configure().
3. jdenticon_config global variable.