I'm putting together a simple hex map to use within an HTML5 / Canvas / JS game and before I get round to sorting any custom graphics, I was wondering if anybody knew how to make the pink/magenta backgrounds transparent so that I can overlap my tiles?


  • 1
    \$\begingroup\$ The pink is called Magenta. It's commonly used because it's a really bright colour and nobody actually wants to use it, so you can make all magenta in the bitmap/png transparent without harming the useful colour data. What you should really be asking is "How do I make magenta in my PNG transparent in HTML5/Canvas/JS?" \$\endgroup\$ – John McDonald Oct 31 '11 at 13:33
  • \$\begingroup\$ Good point. In that case, any suggestions on that front? I assumed it was part of the PNG file not part of the code? \$\endgroup\$ – Chris Evans Oct 31 '11 at 13:52
  • \$\begingroup\$ I don't know how to do it in your environment, I would recommend editing your question. \$\endgroup\$ – John McDonald Oct 31 '11 at 13:56
  • 2
    \$\begingroup\$ Really, you should just edit the magenta to be transparent in any image editor that can support transparency (so, not MS Paint). Doing the same with canvas and javascript will be slower. \$\endgroup\$ – thedaian Oct 31 '11 at 14:13
  • 1
    \$\begingroup\$ @Noctrine: Extended my answer. Hope you like it :) \$\endgroup\$ – bummzack Oct 31 '11 at 17:51

As thedaian mentioned in his comment, converting the magenta pixels to transparent in JavaScript is going to be slow. You should convert your images to a suitable format beforehand.

ImageMagick can be really useful for this kind of tasks. Converting your tile with magenta background to an image with transparency is as simple as this:

convert myOpaqueTile.png -transparent "#FF00FF" myTransparentTile.png

This will convert your file with magenta background (myOpaqueTile.png) to a file with a transparent background (will be saved as myTransparentTile.png).

Of course you could also use Photoshop, GIMP or something like Paint.NET for this.

Update: If you want to do the whole thing in code (JavaScript), then look into the getImageData function of the HTML5 canvas element. Here's an article about canvas image manipulation.

And here's some sample code that will convert magenta pixels to transparent ones in JavaScript:

// source file to load
var file = "testData.png";

// color to make transparent. Magenta here...
var transparentColor = {
    r : 255,
    g : 0,
    b : 255

var img = new Image();
img.src = file;
img.onload = function(){
    // create a source canvas. This is our pixel source
    var srcCanvas = document.createElement("canvas");
    srcCanvas.width = img.width;
    srcCanvas.height = img.height;

    // create a destination canvas. Here the altered image will be placed
    var dstCanvas = document.createElement("canvas");
    dstCanvas.width = img.width;
    dstCanvas.height = img.height;

    // append the canvas elements to the container

    // get context to work with
    var srcContext = srcCanvas.getContext("2d");
    var dstContext = dstCanvas.getContext("2d");

    // draw the loaded image on the source canvas
    srcContext.drawImage(img, 0, 0);

    // read pixels from source
    var pixels = srcContext.getImageData(0, 0, img.width, img.height);

    // iterate through pixel data (1 pixels consists of 4 ints in the array)
    for(var i = 0, len = pixels.data.length; i < len; i += 4){
        var r = pixels.data[i];
        var g = pixels.data[i+1];
        var b = pixels.data[i+2];

        // if the pixel matches our transparent color, set alpha to 0
        if(r == transparentColor.r && g == transparentColor.g && b == transparentColor.b){
            pixels.data[i+3] = 0;

    // write pixel data to destination context
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.