Skip to main content
se eliminaron 182 caracteres en el cuerpo
Origen Enlace
  • Si el color del pixel actual, no es el color a rellenar, sale.
  • pinta la linea horizontal del punto seleccionado.
  • Para cada pixel pintado, vuelve a llamar la funcion rellenar, para el pixel superior e inferior, en caso que sean del color del fondo a rellenar.
var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        if (!(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        
        var wy_ant=(y-1)*w;
        var wy_post=(y+1)*w;
        
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=(wy_ant+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=(wy_post+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>
  • Si el color del pixel actual, no es el color a rellenar, sale.
  • pinta la linea horizontal del punto seleccionado.
  • Para cada pixel pintado, vuelve a llamar la funcion rellenar, para el pixel superior e inferior, en caso que sean del color del fondo a rellenar.
var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        if (!(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        
        var wy_ant=(y-1)*w;
        var wy_post=(y+1)*w;
        
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=(wy_ant+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=(wy_post+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>
  • pinta la linea horizontal del punto seleccionado.
  • Para cada pixel pintado, vuelve a llamar la funcion rellenar, para el pixel superior e inferior, en caso que sean del color del fondo a rellenar.
var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        
        var wy_ant=(y-1)*w;
        var wy_post=(y+1)*w;
        
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=(wy_ant+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=(wy_post+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>
se añadieron 70 caracteres en el cuerpo
Origen Enlace

El objeto canvas no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria.

EDIT: He retocado el código de relleno, para que funcione a base de lineas y no de píxeles, de manera que hace menos llamadas recursivas. Parece que funciona mejor y es más estable.

Además, alAl usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.

Como funciona:
Almacena el color nuevo y el de fondo
Si el color nuevo y el de fondo son distintos, llama a la funcion rellenar.
funcion rellenar:

var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        if (!(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        
        var wy_ant=(y-1)*w;
        var wy_post=(y+1)*w;
        
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=((y-1)*w+iwy_ant+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=((y+1)*w+iwy_post+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>

El objeto canvas no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria.

EDIT: He retocado el código de relleno, para que funcione a base de lineas y no de píxeles, de manera que hace menos llamadas recursivas. Parece que funciona mejor y es más estable.

Además, al usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.

Como funciona:
Almacena el color nuevo y el de fondo
Si el color nuevo y el de fondo son distintos, llama a la funcion rellenar.
funcion rellenar:

var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        if (!(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=((y-1)*w+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=((y+1)*w+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>

El objeto canvas no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria.

EDIT: He retocado el código de relleno, para que funcione a base de lineas y no de píxeles, de manera que hace menos llamadas recursivas. Parece que funciona mejor y es más estable.

Al usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.

Como funciona:
Almacena el color nuevo y el de fondo
Si el color nuevo y el de fondo son distintos, llama a la funcion rellenar.
funcion rellenar:

var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        if (!(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        
        var wy_ant=(y-1)*w;
        var wy_post=(y+1)*w;
        
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=(wy_ant+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=(wy_post+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>
se añadieron 843 caracteres en el cuerpo
Origen Enlace

El objeto canvas no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria. 

En este ejemplo, encapsulo las llamadas recursivas en un try catch en un intento de evitar un error irrecuperable, evidentementeEDIT: He retocado el código es mejorablede relleno, pero alpara que funcione a base de lineas y no de píxeles, de manera que hace menos pintará una partellamadas recursivas. Parece que funciona mejor y es más estable. 

Además, al usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.
 
Este ejemplo no es una solución realista, ya que no siempreComo funciona, pero te podrás hacer una idea:
Almacena el color nuevo y el de como solucionarlo, encontrando un códigofondo
Si el color nuevo y el de relleno mejorfondo son distintos, llama a la funcion rellenar.
funcion rellenar:

  • Si el color del pixel actual, no es el color a rellenar, sale.
  • pinta la linea horizontal del punto seleccionado.
  • Para cada pixel pintado, vuelve a llamar la funcion rellenar, para el pixel superior e inferior, en caso que sean del color del fondo a rellenar.
var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        data[offset]=colorNuevoRGBif (!(data[offset]==fondoRGB.r;r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        data[offset+1]=colorNuevoRGB.g;
        data[offset+2]=colorNuevoRGB.b;var ini, fin;
        try{var salir=false;
        var yw=y*w;
   offset=(     ini=x;
        for (ylet i=x; !salir && i>=0 ; i-1-)*w+x{
            offset=(yw+i)*4;
            ifsalir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                rellenar(x,y-1);data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(y*w+x+1yw+i)*4;
            ifsalir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                rellenardata[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        for (x+1,y)let i=ini; i<=fin ; i++){
            }if (y>0){
                offset=((y+1y-1)*w+x*w+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (xi,y+1y-1);
                }
            }
            if (y<h){
                offset=(y*w+x-1(y+1)*w+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (x-1i,yy+1);
                }
        } catch(e){console.log(e);   }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>

El objeto canvas no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria.
En este ejemplo, encapsulo las llamadas recursivas en un try catch en un intento de evitar un error irrecuperable, evidentemente el código es mejorable, pero al menos pintará una parte.
Además, al usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.

Este ejemplo no es una solución realista, ya que no siempre funciona, pero te podrás hacer una idea de como solucionarlo, encontrando un código de relleno mejor.

var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        data[offset]=colorNuevoRGB.r;
        data[offset+1]=colorNuevoRGB.g;
        data[offset+2]=colorNuevoRGB.b;
        try{
            offset=((y-1)*w+x)*4;
            if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                rellenar(x,y-1);
            }
            offset=(y*w+x+1)*4;
            if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                rellenar(x+1,y);
            }
            offset=((y+1)*w+x)*4;
            if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                rellenar(x,y+1);
            }
            offset=(y*w+x-1)*4;
            if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                rellenar(x-1,y);
            }
        } catch(e){console.log(e);}

    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>

El objeto canvas no dispone de un método para rellenar zonas, de manera que hay que hacerlo a mano.
Un sistema podría ser el pintado de píxeles adyacentes recursivamente, pero nos encontraremos con el problema de la pila, ya que pintar zonas grandes requeriría mucha memoria. 

EDIT: He retocado el código de relleno, para que funcione a base de lineas y no de píxeles, de manera que hace menos llamadas recursivas. Parece que funciona mejor y es más estable. 

Además, al usar una imagen externa, al intentar modificarla dará un error de CORS, por lo que en este ejemplo, he codificado la imagen en base64.
 
Como funciona:
Almacena el color nuevo y el de fondo
Si el color nuevo y el de fondo son distintos, llama a la funcion rellenar.
funcion rellenar:

  • Si el color del pixel actual, no es el color a rellenar, sale.
  • pinta la linea horizontal del punto seleccionado.
  • Para cada pixel pintado, vuelve a llamar la funcion rellenar, para el pixel superior e inferior, en caso que sean del color del fondo a rellenar.
var colorNuevoHex;
var mouseX, mouseY;
var marco;
var contexto;
var imagenCompleta;
var colorZonaHex;
var colorZonaRGB;

function cargarDibujo() {
  marco = document.getElementById('dibujo');
  contexto = marco.getContext('2d');

  var img = new Image();
  img.src = "data:image/png;base64,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";

  img.onload = function() {
    contexto.drawImage(img, 0, 0);
  }
}

function setColor(color) {
  colorNuevoHex = color;
  document.getElementById('colorElegido').style.backgroundColor = colorNuevoHex;
}


function rellenarFiguraCanvas(obj,x,y,color){
    
}

function cambiarColor() {
    var obj = marco;
    var w = obj.width;
    var h = obj.height;
    var context = obj.getContext('2d');
    var image = context.getImageData(0,0,w,h);
    var data = image.data;
    
    var x = mouseX;
    var y = mouseY;
    
    var offset=(y*w+x)*4;
    var fondoRGB = {r:data[offset],
                    g:data[offset+1],
                    b:data[offset+2]
    };

    if (!colorNuevoHex) colorNuevoHex="#FFFFFF";
    var colorNuevoRGB = hexToRgb(colorNuevoHex);
    
    var rellenar = function(x,y){
        var offset=(y*w+x)*4;
        if (!(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b)) return;
        
        var ini, fin;
        var salir=false;
        var yw=y*w;
        ini=x;
        for (let i=x; !salir && i>=0 ; i--){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                ini=i;
            }
        }
        salir=false;
        fin=x;
        for (let i=x+1; !salir && i<=w ; i++){
            offset=(yw+i)*4;
            salir= !(data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b);
            if (!salir){
                data[offset]=colorNuevoRGB.r;
                data[offset+1]=colorNuevoRGB.g;
                data[offset+2]=colorNuevoRGB.b;
                fin=i;
            }
        }
        for (let i=ini; i<=fin ; i++){
            if (y>0){
                offset=((y-1)*w+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y-1);
                }
            }
            if (y<h){
                offset=((y+1)*w+i)*4;
                if (data[offset]==fondoRGB.r && data[offset+1]==fondoRGB.g && data[offset+2]==fondoRGB.b){
                    rellenar (i,y+1);
                }
            }           
        }
    }
    if (!(fondoRGB.r==colorNuevoRGB.r && fondoRGB.g==colorNuevoRGB.g && fondoRGB.b==colorNuevoRGB.b)){
        rellenar(x,y);
        context.putImageData(image, 0, 0);
    }
 }

function setCoords(e) {
  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  document.getElementById('coords').innerHTML = mouseX + ' X' + ', ' + mouseY + ' Y';
}

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}
<body onload="cargarDibujo();">
  <canvas id="dibujo" width="500" height="500" onclick="cambiarColor();" onmousemove="setCoords(event);" style="position: relative; border: 0;"></canvas>
  <hr />
  <div id="colorElegido" style="display: block; width: 100px; height: 100px; border: 1px solid #000;"></div>
  <p id="coords"></p>
  <hr />
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FFFFFF;" onclick="setColor('#FFFFFF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #FF0000;" onclick="setColor('#FF0000');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #00FF00;" onclick="setColor('#00FF00');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #0000FF;" onclick="setColor('#0000FF');"></button>
  <button style="display: block; width: 20px; height: 20px; border: 1px solid #000; background-color: #000000;" onclick="setColor('#000000');"></button>
</body>
se añadieron 117 caracteres en el cuerpo
Origen Enlace
Loading
Origen Enlace
Loading