binarymax / floodfill.js

HTML5 Canvas Floodfill via JavaScript
MIT License
57 stars 14 forks source link

anti-alias not work #15

Open arpeggiozz opened 7 years ago

arpeggiozz commented 7 years ago

Here is my code:

var canvas = document.getElementById("canvas_circle_spec");
var context = canvas.getContext("2d");
context.strokeStyle = "#d90000";
context.save();
context.beginPath();
context.arc(64, 64, 50, 0, 2 * Math.PI, false);
context.lineWidth = 10;
context.stroke();
context.closePath();
context.restore();

context.fillStyle = "#d90000";
context.fillFlood(0, 0, 128);
context.fillFlood(64, 64, 128);

Basically, I draw a circle, and fill outside then inside. I assume it should be all red, but there are creepy zigzag along the circle. I got stuck. I guess it's about anti-alias stuff, and I read about the tolerance part, but still not work. Can it be done, and any recommended further reading? Thanks. Codepen demo here