diff --git a/index.html b/index.html index f9089a646ca12c35bebe92534da09c505c1a754e..85aa13d8f0961cc7c9ba6e6700a17fcaf13e6f48 100644 --- a/index.html +++ b/index.html @@ -166,6 +166,8 @@ const INFOS_START_POSITION = 150; const INFOS_LINE_BREAK = 50; + const CKSUM_COLOR = "#686868" + const PUBKEY_URI_FONT = "20px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif"; const G1_WRONG_SYMBOL = "G1"; @@ -331,11 +333,22 @@ } else { // Write short pubkey centered on QRcode ctx.font = INFOS_FONT; - short_pubkey = pubkey.substring(0,4) + "…" + pubkey.substring(pubkey.length - 8, pubkey.length) - yPosPubkey = parseInt(yPosQr + QR_WIDTH_AND_HEIGHT + MARGIN_CANVAS); - ctx.textAlign = "center" - ctx.fillText (short_pubkey, xPosQr + QR_WIDTH_AND_HEIGHT/2 , yPosPubkey); - ctx.textAlign = "start" + short_pubkey = pubkey.substring(0,4) + "…" + pubkey.substring(pubkey.length - 8, pubkey.length-4); + colon_cksum = pubkey.substring(pubkey.length - 4, pubkey.length); + // measure text length + let len_pk_ck = ctx.measureText(short_pubkey + colon_cksum).width; + // compute start coordinates + yPosPubkey = parseInt(yPosQr + QR_WIDTH_AND_HEIGHT + MARGIN_CANVAS / 2); + xPosPubkey = parseInt((xPosQr + QR_WIDTH_AND_HEIGHT/2) - len_pk_ck / 2); + xPosCksum = xPosPubkey + ctx.measureText(short_pubkey).width; + // write short pubkey + ctx.textAlign = "start"; + ctx.fillText (short_pubkey, xPosPubkey , yPosPubkey); + // write checksum in grey + ctx.save(); + ctx.fillStyle = CKSUM_COLOR; + ctx.fillText (colon_cksum, xPosCksum , yPosPubkey); + ctx.restore(); } // image