Chrome now supports clickable circular canvas corners

Question

Chrome now supports clickable circular canvas corners

I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning.

This is where it gets exciting - I've added click events to both circles! If you happen to click within the inner canvas, the color at that exact point will magically appear on the outer canvas. Not only that, but the opacity of the color will smoothly transition from white to the picked color and eventually fade into black. On the other hand, if you decide to click on the outer canvas, the precise color value at that particular point will accurately display in the text-box located at the bottom.

Alright, here's the issue I'm facing: Unfortunately, for some reason unknown to me, I am restricted from clicking on certain areas in the outer canvas that are colored red (as shown in the accompanying figure). Strangely enough, this problem only occurs when using Chrome. Firefox, on the other hand, operates flawlessly without any issues whatsoever.

Keep this little tidbit in mind: You actually have the ability to drag the picker object around inside the outer circle. However, if you accidentally leave it in one of those pesky red zones, you won't be able to click it again in Chrome. The good news is that as long as you click within the green zone, you can regain control of the picker object once more. Phew!

If you're interested in checking out the code behind this mesmerizing experience, feel free to take a look at my JSFiddle:

The Unique Code within this JSFiddle

Edit

In order to simplify things and remove any unnecessary code, I've excluded portions that aren't relevant. Now, all you'll find is a container housing two canvases - each filled with its own distinct color. Here's where it gets interesting: Try opening the updated version of the fiddle in both Chrome and Firefox. Click on different areas within both circles and observe the intriguing differences between the two browsers. The ultimate goal here is to make them behave identically in Chrome as they do in Firefox.

Just a little side note: In the end, my plan is to create an awesome image within the inner canvas. Exciting stuff, right?

If you're up for even more excitement, feel free to check out the latest version of the JSFiddle:

The Updated Fiddle Link full of Uniqueness

-

javascript html5-canvas css clickable

Answer 1

Answer №1

The issue you are facing is due to the fact that canvases are always rectangular, even if they appear to have a different shape. The border radius creates transparent edges, but events can still occur in the corner areas of Chrome, which is why you are unable to click on the bottom circle in those areas.

I attempted to solve this problem by placing the canvas inside a container with a border radius, but the click event still passes through.

There are two possible solutions. First, you could modify your code to use only one canvas and redraw the background circle before drawing any other elements each time. This involves drawing a circle, then applying a black-to-white gradient using the "xor" operation to combine it with the previous circle, and repeating the process for the rainbow gradient. It's important to draw the background circle first because the canvas repaints over the previous layers every time.

Alternatively,

You can use JavaScript to detect clicks only within the circular area, which requires some basic math calculations (: This solution is explained further below

In the future, CSS Shapes might allow non-rectangular canvases to be used as elements, though this capability is not currently available.

Edit

Upon reviewing your code, I found some points that should be addressed before providing a solution:

Declare all finite variables outside functions that run repeatedly, such as the click function. These variables (e.g., radii, offsets) do not change and thus should not be included within those functions.
Your "radii" are actually diameters. In the .rect format, it should be
```
.rect(x, y, width (circle's diameter), height (circle's diameter))
```
In most cases, when overlaying canvases like you're doing, it's advisable to make them equal in dimensions and starting position to avoid calculation errors. You can achieve relative positioning using JavaScript instead of mixing it with CSS. However, in this case, given that you're using border-radius instead of arc to create a circle, it's fine to leave it as is and adjust the position using JavaScript...
For something as simple as this, you don't really need jQuery. If you're concerned about load speed, I recommend implementing it in vanilla JavaScript by changing the .click() functions to .onclick functions. For now, I'll keep jQuery.
You can declare multiple variables at once without using var repeatedly. The following format can be used:

var name1 = value1,
    name2 = value2;

Variables with the same value can be declared like this:

var name1 = name2 = sameValue;

When children have position:absolute and their position is relative to the parent, the parent container should have either position:relative, position:fixed, or position:absolute. In this case, position:relative should suffice.
If you fail to use var when declaring a variable, it becomes global (unless chained with a comma, as shown above). For further clarification, you can read this question on Stack Overflow: [link to the question]

Now, let's move on to the solution.

After discussing with a friend, I realized that calculating the math for this situation was easier than I initially thought. We can calculate the centers of the circles, consider their radii, and use if statements to ensure that clicks fall within the bounds.

Here's the demo

Once everything is set up correctly, you can use the following code to determine whether the click falls within the desired bounds:

function clickHandler(e, r) {
    var ex = e.pageX,
        ey = e.pageY,
        // Distance from click to center
        l = Math.sqrt(Math.pow(cx - ex, 2) + Math.pow(cy - ey, 2));

    if(l > r) { // If the distance is greater than the radius
        if(r === LARGE_RADIUS) { // Outside of the large circle
            // Do nothing
        } else { // In the problematic corner area
            clickHandler(e, LARGE_RADIUS);
        }
    } else {
        if(r === LARGE_RADIUS) { // Inside the large circle
            alert('Outer canvas clicked x:' + ex + ',y:' + ey);
        } else { // Inside the small circle
            alert('Inner canvas clicked x:' + ex + ',y:' + ey);
        }
    }
}

// Simply call the function with the appropriate radius on click
$(img_canvas).click(function(e) { clickHandler(e, SMALL_RADIUS); });    
$(wheel_canvas).click(function(e) { clickHandler(e, LARGE_RADIUS); });

I hope the comments and code above are clear enough. I tried to improve them as much as possible. If you have any questions, feel free to ask!

Answer 2

The issue you are facing is due to the fact that canvases are always rectangular, even if they appear to have a different shape. The border radius creates transparent edges, but events can still occur in the corner areas of Chrome, which is why you are unable to click on the bottom circle in those areas.

I attempted to solve this problem by placing the canvas inside a container with a border radius, but the click event still passes through.

There are two possible solutions. First, you could modify your code to use only one canvas and redraw the background circle before drawing any other elements each time. This involves drawing a circle, then applying a black-to-white gradient using the "xor" operation to combine it with the previous circle, and repeating the process for the rainbow gradient. It's important to draw the background circle first because the canvas repaints over the previous layers every time.

Alternatively,

You can use JavaScript to detect clicks only within the circular area, which requires some basic math calculations (: This solution is explained further below

In the future, CSS Shapes might allow non-rectangular canvases to be used as elements, though this capability is not currently available.

Edit

Upon reviewing your code, I found some points that should be addressed before providing a solution:

Declare all finite variables outside functions that run repeatedly, such as the click function. These variables (e.g., radii, offsets) do not change and thus should not be included within those functions.
Your "radii" are actually diameters. In the .rect format, it should be
```
.rect(x, y, width (circle's diameter), height (circle's diameter))
```
In most cases, when overlaying canvases like you're doing, it's advisable to make them equal in dimensions and starting position to avoid calculation errors. You can achieve relative positioning using JavaScript instead of mixing it with CSS. However, in this case, given that you're using border-radius instead of arc to create a circle, it's fine to leave it as is and adjust the position using JavaScript...
For something as simple as this, you don't really need jQuery. If you're concerned about load speed, I recommend implementing it in vanilla JavaScript by changing the .click() functions to .onclick functions. For now, I'll keep jQuery.
You can declare multiple variables at once without using var repeatedly. The following format can be used:

var name1 = value1,
    name2 = value2;

Variables with the same value can be declared like this:

var name1 = name2 = sameValue;

When children have position:absolute and their position is relative to the parent, the parent container should have either position:relative, position:fixed, or position:absolute. In this case, position:relative should suffice.
If you fail to use var when declaring a variable, it becomes global (unless chained with a comma, as shown above). For further clarification, you can read this question on Stack Overflow: [link to the question]

Now, let's move on to the solution.

After discussing with a friend, I realized that calculating the math for this situation was easier than I initially thought. We can calculate the centers of the circles, consider their radii, and use if statements to ensure that clicks fall within the bounds.

Here's the demo

Once everything is set up correctly, you can use the following code to determine whether the click falls within the desired bounds:

function clickHandler(e, r) {
    var ex = e.pageX,
        ey = e.pageY,
        // Distance from click to center
        l = Math.sqrt(Math.pow(cx - ex, 2) + Math.pow(cy - ey, 2));

    if(l > r) { // If the distance is greater than the radius
        if(r === LARGE_RADIUS) { // Outside of the large circle
            // Do nothing
        } else { // In the problematic corner area
            clickHandler(e, LARGE_RADIUS);
        }
    } else {
        if(r === LARGE_RADIUS) { // Inside the large circle
            alert('Outer canvas clicked x:' + ex + ',y:' + ey);
        } else { // Inside the small circle
            alert('Inner canvas clicked x:' + ex + ',y:' + ey);
        }
    }
}

// Simply call the function with the appropriate radius on click
$(img_canvas).click(function(e) { clickHandler(e, SMALL_RADIUS); });    
$(wheel_canvas).click(function(e) { clickHandler(e, LARGE_RADIUS); });

I hope the comments and code above are clear enough. I tried to improve them as much as possible. If you have any questions, feel free to ask!

Chrome now supports clickable circular canvas corners

The Unique Code within this JSFiddle

The Updated Fiddle Link full of Uniqueness

Answer №1

Similar questions

Flattening an array of Map in Typescript involves combining all the

The TextField is currently unable to be edited because of an Uncaught TypeError stating it is not iterable

Mastering the art of customizing classes and styles in material-ui (React)

Creating a text shadow effect with text that has a transparent color

Why doesn't Material-UI seem to understand the theme.spacing function?

Transfer all image files from Node.js to the frontend

Could the comments within a NodeJS script be causing memory problems?

What is the best way to use toggleClass on a specific element that has been extended

Ways to apply CSS to a changing div ID

Adjust the background color of a non-selected Material-UI checkbox

Tips on adding to Jquery html code while maintaining the current CSS styling

Shifting the final child to the front position proves unsuccessful with jQuery

The vertical scrolling feature seems to be malfunctioning within my angular 10 application

Struggling to make EJS button functional on the template

Is it viable to create an onClick event for the text content within a text area?

Transmit messages from server (via Expressjs routing) to the client

What is the complete list of features that ColorTranslator.FromHtml() supports and what are the reasons behind its departure from traditional CSS color interpretation guidelines

Margin and padding have the ability to increase the size of an image

Encountering issues with importing a module from a .ts file

Guide on displaying multiple views along with their respective models fetched through AJAX in Backbone