JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<a href="http://facebook.com">facebook.com</a>
<a href="http://google.com">google.com</a>
    
   
<canvas id="canvas" style="" width="20" height="40"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='20' height='40' style='margin:0 !important'><foreignObject width='100%' height='100%' >" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;margin:none !important;'><a style='letter-spacing:-7px;padding:none !important;' href='{0}'>||||||||||||</a></div></foreignObject></svg>";
var renderToCanvas = function(a, cb) {
    
    var svg = new(self.BlobBuilder || self.MozBlobBuilder || self.WebKitBlobBuilder);
    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var thisData = data.replace( '{0}', a.href );
    console.log( thisData,a.href );
    svg.append(thisData);
    var url = DOMURL.createObjectURL(svg.getBlob("image/svg+xml;charset=utf-8"));
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
                console.log( url );
        var imageData = ctx.getImageData( 0, 0, 20, 20);
        

        cb({
            isVisited: true,
            element: a
        });
    };
    img.src = url;
};
var anchors = $( "a" ),
    len = anchors.length;

var getAnchor = function( index ){
    if( !index ){
return false;                
    }
    --index;
    renderToCanvas( anchors[index], function( res ){
        console.log( res );
        getAnchor( index );
    });
    
    
};

getAnchor( len );