+<html><head><title>fingerprint my canvas</title><meta name='viewport' value='width=device-width,initial-scale=1'><style>*{box-sizing:border-box;font-size:16px;font-weight:300}body{display:flex;background:#222}main{align-self:center;margin:0 auto;max-width:40rem;width:100%}main>*{overflow-wrap:break-word;width:100%}h4{font-size:1.6rem;font-family:sans-serif;color:#888}h2{font-size:2rem;font-family:monospace;color:#fff;min-height:6rem}::selection{background:#7f0003}</style></head><body><main><h4>Your canvas' fingerprint is</h4><h2></h2></main><script>(async()=>{for(r of(circle=((e,t,c,r,n)=>{e.beginPath(),e.arc(c,r,n,0,2*Math.PI),e.fillStyle=t,e.fill()}),c=document.createElement("canvas").getContext("2d"),c.font="20px Arial",c.fillText("hello world!",0,100),circle(c,"aqua",20,20,20),circle(c,"red",50,50,20),s=c.canvas.toDataURL(),n=new TextEncoder,d=n.encode(s),h=await crypto.subtle.digest("SHA-384",d),f=btoa(String.fromCharCode(...new Uint8Array(h))),t=document.querySelector("h2"),t.innerText="",f))t.innerText+=r,await new Promise(e=>setTimeout(e,30))})();</script></body></html>
0 commit comments