jdenticon.drawIcon()

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

jdenticon.drawIcon(ctx, hash|value, size[, padding])
Compability
Browser: Yes Node.js: No

Examples

In the following exampledrawIconis 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@2.1.0"></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.

padding specifies the padding surrounding the icon in percents in the range 0.0 to 0.5. If the parameter is omitted no padding will be added to the icon. The parameter is available from version 2.0.0.