Question

I have google maps api as my full screen background that can be resized and moved by the user. I want my text over the map to dynamically change to the inverse of the color behind it. To improve visibility.

So if the user was over the ocean that happened to be 0x0000FF, the text would be 0xFFFF00. This seems crazy to me to get every pixel behind the text unless someone has already made that function.

Does this exist?

Answer 1

You could do this in HTML 5.

Basically you draw an HTML5 canvas, then you need to get the location of the mouse when it moves or on some other event. Given that you’re over the canvas, you use getImageData(x, y, width, height) to get pixel data of a portion of the selection.

E.g.:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.getImageData(10,10,50,50);

The data object you get back contains four values for each pixel in your selection, R, G, B and A. RGB are the color channels, A is the Alpha channel (visibility).

Next step would be to convert that value from RGB to Hex, which you could do with a simple helper function:

function rgbToHex(r, g, b) {
    return ((r << 16) | (g << 8) | b).toString(16);
}

Now that you have the color, you need to create a mapping or function to get the inverse color. Depending on what effect you want you will have to work this function over a little. Here are two sites that do this type of thing and you can view-source to see their functions and modify if needed.

• Inverse Color Code Generator
• Inverse / Opposite Color Generator

Then you could use JQuery to set the color of your text.