In the second interlude a showed how I removed the solid borders from all cards manually. It is possible to do it instead by some JS code that would go in our converter program (see the Unicode revisited page).
Once the complete image has been drawn into the canvas use context.getImageData(). Then on each edge, near the middle of a card, use a for loop to move into the card, testing each pixel to see when it changes from pure white (255, 255, 255) and when it changes back to white again. The coordinates of those transition points can be used to form rectangles to fill with white to replace the borders.
You just need to know how to sample a pixel at any (x, y) position. I have my own method for type ImageData (which has 3 properties: width, height and data):
ImageData.prototype.getPixel = function (x, y)
{ var i = (this.width * y + x) * 4;
return [this.data [i], this.data [i + 1],
this.data [i + 2], this.data [i + 3]];
};
The 4 values returned in the array are red, green, blue and alpha (transparency), each ranging from 0 to 255 (1-byte unsigned integers). We are only interested in the first 3.
Some say it is bad practice to add methods to built-in JS types but I have not seen a convincing argument for that. There is a possibility that a getPixel() method will be added to the standard but that does not necessarily matter. The code above would merely override that and it would still work.