Rounds - border-radius inset for pictures

Some time ago, a task appeared for a designer to create a site stylized as a wild west. As a layout designer, I got the task from the designer to make pictures and some backgrounds, stylized as wild-West signs. On each page in an unknown quantity and unknown size. The task was aggravated by the complex background and the need for transparent holes in the images. Those. it was necessary to use border-radius: inset, which, as it turned out, does not exist ... Cutting a bunch of pictures under each page and case, by itself, is unrealistic and pointless. The customer was not one of the "followers of explorer 6", so I decided to simplify my life with a bunch of jQuery and HTML5.

What happened

The result is a small jQuery plugin. The principle is extremely simple: by the selector we find the necessary pictures, hide, create a canvas next to it with the same dimensions into which the original picture is duplicated, we make holes. The plugin optionally accepts three parameters: an array of round radii (in pixels), border thickness and its color (if needed, of course).

Example:

	$(".block-4 img").borderRadiusInset({
		radius: [30,60,0,20],
		width: 10,
		color: "#00719e"
	});

You can pass from one to four values ​​to the radius array, which work on the same principle as the radii in css for border-radius:

1. all radii are the same;
2. the first value is the radius of the left upper and right lower rounds, the second is the remaining;
3. the first is the upper left, the second is the upper right and lower left, the third is the lower right;
4. Each round has its own radius, starting from the upper left and then clockwise.

The plugin works only with images, but with the proper level of abnormality or urgent need for styles, you can also organize backgrounds for blocks of content that are static after loading the page, but with unknown sizes before loading.

Why is ctx.globalCompositeOperation better than ctx.clip () for a leaky canvas?

Actually, everything is clear from the picture. Everywhere round as round, but in chrome when using ctx.clip (), holes in the canvas are obtained with stepwise torn edges (everything is fine in other browsers). The solution was found here . This is where the perfectionist hell ended.

References

Feel an example: jsfiddle.net/53vq5pn1
Dig a source: github.com/tegArt/border-radius-inset

Rounds? *

* The last paragraph to convey the emotions of the author should be read in the voice of Sheldon Cooper and with the corresponding intonation.

Yes, round. Circle plus angle. Why not round? Because the corner is not round, but rounded. “Round” is an adjective, and, in principle, donuts are also round. But round is a new word in web development that facilitates the work of layout designers and designers, reducing the time it takes to convey your thoughts to colleagues by an average of 4 (four!) Seconds per week. I'm more serious than ever. Guys, this is a breakthrough.