I try to use floodfill algorithm to fill a shape,but the edges still have some white pixel,looks like dashed lines.
How to fill the white spaces?
This is all the code I created so far,I hope it's clear(it's quite a lot but a lot of the part is just drawing the leaf shape):
function canadaFlag() {
//1920 width 960 height
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
let width=canvas.width;
let height=canvas.height;
ctx.fillStyle = '#FF0000';
ctx.fillRect(0,0,width,height);
lineW('#FFFFFF',ctx,(1/4)*width,0,(1/2)*width,height);
leaf('#FF0000',ctx,width,height);
}
function lineW(color,ctx,posX,posY,width,height) {
ctx.fillStyle = color;
ctx.fillRect(posX,posY,width,height);
ctx.fill();
}
function leaf(color,ctx,width,height) {
ctx.fillStyle = color;
let radius=(13/960)*height;
let radius_2=(19/960)*height;
let coords=[[0.5*width,(1/12)*height],[0.5346145833*width,0.219203125*height]]
//1
ctx.beginPath();
ctx.moveTo(coords[0][0],coords[0][1]);
ctx.lineTo(coords[1][0],coords[1][1]);
ctx.stroke();
let arcG=[0.5406473953*width,0.2130552083*height]; //150
var xc = (0.5346145833*width + 0.5440328125*width) / 2; //tanget
var yc = (0.219203125*height + 0.2247833333*height) / 2;
ctx.beginPath();
ctx.arc(arcG[0], arcG[1], radius, 0.2 * Math.PI, 1 * Math.PI);
ctx.moveTo(0.5440328125*width,0.2247833333*height);
ctx.lineTo((37/64)*width , (89/480)*height);
//2
let coords2=[[0.5568234375*width,0.4045927083*height]]
ctx.lineTo(coords2[0][0],coords2[0][1]);
ctx.stroke();
let arcH=[0.5634697917*width,0.4071760417*height];//133
var xc2 = (0.5568234375*width + 0.5684213542*width) / 2; //tanget
var yc2 = (0.4045927083*height + 0.4164114583*height) / 2;
ctx.beginPath();
ctx.arc(arcH[0], arcH[1], radius, 0.26111111111 * Math.PI, 1.1 * Math.PI, false);
ctx.moveTo(0.5684213542*width,0.4164114583*height);
ctx.lineTo((49/80)*width , (103/320)*height);
ctx.stroke();
//3
let coords3=[[0.6234208333*width,0.3733302083*height]]
ctx.lineTo(coords3[0][0],coords3[0][1]);
ctx.stroke();
let arcI=[0.629653125*width,0.3680385417*height];//168
var xc3 = (0.5568234375*width + 0.6310609375*width) / 2; //tanget
var yc3 = (0.4045927083*height + 0.381284375*height) / 2;
ctx.beginPath();
ctx.arc(arcI[0], arcI[1], radius, 0.43888888889 * Math.PI, 0.95* Math.PI, false);
ctx.moveTo(0.6310609375*width,0.381284375*height);
ctx.lineTo((11/16)*width , (343/960)*height);
ctx.stroke();
//4 C
let coords4=[[0.6681291667*width,0.4765270833*height]]
ctx.lineTo(coords4[0][0],coords4[0][1]);
ctx.stroke();
let arcJ=[0.67456875*width,0.4807114583*height];//105
var xc4 = (0.5568234375*width + 0.6717072917*width) / 2; //tanget
var yc4 = (0.4045927083*height + 0.492984375*height) / 2;
ctx.beginPath();
ctx.arc(arcJ[0], arcJ[1], radius, 0.5 * Math.PI, 1.15* Math.PI, false);
//ctx.stroke();
ctx.moveTo(0.6717072917*width,0.492984375*height);
ctx.lineTo(0.69375*width , 0.5135416667*height);
ctx.stroke();
//5 K
let coords5=[[0.5956979167*width,0.67234375*height]]
ctx.lineTo(coords5[0][0],coords5[0][1]);
ctx.stroke();
let arcK=[0.5999588542*width,0.6828677083*height];//109
var xc5 = (0.5568234375*width + 0.5935963542*width) / 2; //tanget
var yc5 = (0.4045927083*height + 0.6874989583*height) / 2;
ctx.beginPath();
ctx.arc(arcK[0], arcK[1], radius, 0.69444444444 * Math.PI, 1.3* Math.PI, false);
//ctx.stroke();
ctx.moveTo(0.5935963542*width,0.6874989583*height);
ctx.lineTo(0.6057291667*width , 0.7541666667*height);
ctx.stroke();
//6 L
let coords6=[[0.5162651042*width,0.7226166667*height]]
ctx.lineTo(coords6[0][0],coords6[0][1]);
ctx.stroke();
let arcL=[0.5145463542*width,0.7421072917*height];//108
var xc6 = (0.5568234375*width + 0.5046640625*width) / 2; //tanget
var yc6 = (0.4045927083*height + 0.74314375*height) / 2;
ctx.beginPath();
ctx.arc(arcL[0], arcL[1], radius_2, 1 * Math.PI, 1.6* Math.PI, false);
//ctx.stroke();
ctx.moveTo(0.5046640625*width,0.74314375*height);
ctx.lineTo(0.509375*width , 0.9229166667*height);
ctx.stroke();
//7 A
let coords7=[[0.490625*width,0.9229166667*height],[0.4953359375
*width,0.74314375*height]]
ctx.lineTo(coords7[0][0],coords7[0][1]);
ctx.lineTo(coords7[1][0],coords7[1][1]);
ctx.stroke();
let arcA=[0.4854536458*width,0.7421072917*height];//108
var xc7 = (0.5568234375*width + 0.5162651042*width) / 2; //tanget
var yc7 = (0.4045927083*height + 0.7226166667*height) / 2;
ctx.beginPath();
ctx.arc(arcA[0], arcA[1], radius_2, 1.4 * Math.PI, 0*Math.PI, false);
//ctx.stroke();
ctx.moveTo(0.4837348958*width,0.7226166667*height);
ctx.lineTo(0.3942708333*width , 0.7541666667*height);
ctx.stroke();
//8 B
let coords8=[[0.4064036458*width,0.6874989583*height]]
ctx.lineTo(coords8[0][0],coords8[0][1]);
ctx.stroke();
let arcB=[0.4000411458*width,0.6828677083*height];//108
var xc8 = (0.5568234375*width + 0.4043020833*width) / 2; //tanget
var yc8 = (0.4045927083*height + 0.67234375*height) / 2;
ctx.beginPath();
ctx.arc(arcB[0], arcB[1], radius, 1.4944444444 * Math.PI, 0.1*Math.PI, false); //18-
//ctx.stroke();
ctx.moveTo( 0.4043020833*width,0.67234375*height);
ctx.lineTo(0.30625*width , 0.5135416667*height);
ctx.stroke();
//try
let coords9=[[0.5*width,(1/12)*height+220]]
ctx.lineTo(coords9[0][0],coords9[0][1]-220);
ctx.stroke();
const point = {x:0.5*width, y:0.8*height};
//alert(point.x);
flood(ctx,point,width,height);
}
function flood(ctx,point,width,height) {
let stackPoint='';
var stack = Array();
stack.push(point); // Push the seed
while(stack.length > 0) {
var currPt = stack.pop();
//alert(isEmpty(ctx,currPt.x, currPt.y,width,height)+'hi');
//alert(currPt.x);
//alert(currPt.y);
if(isEmpty(ctx,currPt.x, currPt.y)) { // Check if the point is not filled
setPixel(ctx,currPt.x, currPt.y); // Fill the point
stackPoint = {x:currPt.x + 1, y:currPt.y};
stack.push(stackPoint); // Fill the east neighbour
stackPoint = {x:currPt.x, y:currPt.y + 1};
stack.push(stackPoint); // Fill the south neighbour
stackPoint = {x:currPt.x - 1, y:currPt.y};
stack.push(stackPoint); // Fill the west neighbour
stackPoint = {x:currPt.x, y:currPt.y - 1};
stack.push(stackPoint); // Fill the north neighbour
}
}
}
function isEmpty(ctx,x,y){
let data=echoColor(ctx,x,y);
if (data[0]==255 && data[1]==255 && data[2]==255) {
return true
}
return false
}
function setPixel(ctx,x,y){
ctx.fillStyle = "red";
ctx.fillRect(x,y,1,1);
}
function echoColor(ctx,x,y){
let data = ctx.getImageData(x, y, 1, 1).data;
//alert('R:' + data[0] + ' G:' + data[1] + ' B:' + data[2]);
return data;
}
canadaFlag();<canvas id="myCanvas" width="550" height="275"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>This is the image of the run:
