Question

Sorry if this belongs on a maths forum. I have an image rounded corners within HTML5s canvas element, I want to make the rounded corners transparent. I have the following code:

    var cornersImgData = tempContext.getImageData(0, 0, img.width, img.height);
    var topLeft = getPixel(cornersImgData, 0, 0);
    var topRight = getPixel(cornersImgData, cornersImgData.width - 1, 0);
    var bottomLeft = getPixel(cornersImgData, 0, cornersImgData.height - 1);
    // Check that the rounded corners have actually been applied (e.g. make sure the user hasn't just clicked the button and then undo)
    var bottomRight = getPixel(cornersImgData, cornersImgData.width - 1, cornersImgData.height - 1);
    if (('rgb(' + topLeft[0] + ', ' + topLeft[1] + ', ' + topLeft[2] + ')' == _roundedCornersColour) ||
        ('rgb(' + topRight[0] + ', ' + topRight[1] + ', ' + topRight[2] + ')' == _roundedCornersColour) ||
        ('rgb(' + bottomLeft[0] + ', ' + bottomLeft[1] + ', ' + bottomLeft[2] + ')' == _roundedCornersColour) ||
        ('rgb(' + bottomRight[0] + ', ' + bottomRight[1] + ', ' + bottomRight[2] + ')' == _roundedCornersColour))
    {
        for (var x = 0; x < cornersImgData.width; x++)
        {
            for (var y = 0; y < cornersImgData.height; y++)
            {
                var colour = getPixel(cornersImgData, x, y);
                if ('rgb(' + colour[0] + ', ' + colour[1] + ', ' + colour[2] + ')' == _roundedCornersColour)
                {
                    setPixel(cornersImgData, x, y, colour[0], colour[1], colour[2], 0);
                }
            }
        }
    }

This works but because I am replacing every instance of _roundedCornersColour I sometimes end up replacing a few pixels within the image itself. My high school maths is a little rusty and I can’t figure out the best way to determine if x and y fall outside of where the corner should be. Can anyone help please?

Joe

Answer 1

If the radius is r, then the center of the circle of which the top-left rounded corner are is an arc is at (xc1, yc1) = (r, r), as far as I can tell from your code. You can similarly work out the coordinates of the other three circle centers (xc2, yc2), (xc3, yc3) and (xc4, yc4).

Then near the first corner, you can test if (x-xc1)*(x-xc1) + (y-yc1)*(y-yc1) > r*r and x < xc1 and y < yc1. This is satisfied by points that are outside the circle and in the relevant corner. In the other corners you’ll need to change the circle center in the first test to the relevant circle center, and change the other two inequalities appropriately to select the correct quadrant of the circle.

That’s the basic math. There are many optimizations you could apply for speed, such as the fact that the four corners are all symmetric (each corner has reflective symmetry about a diagonal line and all the corners are rotated copies of each other), and that once you’ve found one point outside the circle you can immediately identify a lot of other points that are also outside it without testing them directly.