Edit Question - KnowledgeHub

Title Body

Has anyone implemented a flood fill algorithm in javascript for use with HTML Canvas? My requirements are simple: flood with a single color starting from a single point, where the boundary color is any color greater than a certain delta of the color at the specified point. var r1, r2; // red values var g1, g2; // green values var b1, b2; // blue values var actualColorDelta = Math.sqrt((r1 - r2)*(r1 - r2) + (g1 - g2)*(g1 - g2) + (b1 - b2)*(b1 - b2)) function floodFill(canvas, x, y, fillColor, borderColorDelta) { ... } Update: I wrote my own implementation of flood fill, which follows. It is slow, but accurate. About 37% of the time is taken up in two low-level array functions that are part of the prototype framework. They are called by push and pop, I presume. Most of the rest of the time is spent in the main loop. var ImageProcessing; ImageProcessing = { /* Convert HTML color (e.g. "#rrggbb" or "#rrggbbaa") to object with properties r, g, b, a. * If no alpha value is given, 255 (0xff) will be assumed. */ toRGB: function (color) { var r, g, b, a, html; html = color; // Parse out the RGBA values from the HTML Code if (html.substring(0, 1) === "#") { html = html.substring(1); } if (html.length === 3 || html.length === 4) { r = html.substring(0, 1); r = r + r; g = html.substring(1, 2); g = g + g; b = html.substring(2, 3); b = b + b; if (html.length === 4) { a = html.substring(3, 4); a = a + a; } else { a = "ff"; } } else if (html.length === 6 || html.length === 8) { r = html.substring(0, 2); g = html.substring(2, 4); b = html.substring(4, 6); a = html.length === 6 ? "ff" : html.substring(6, 8); } // Convert from Hex (Hexidecimal) to Decimal r = parseInt(r, 16); g = parseInt(g, 16); b = parseInt(b, 16);

Tags (comma-separated) Cancel