Rounds - border-radius inset for images

Some time ago there was a task for a designer to make a site stylized as a wild west. As a coder, I had a task from the designer to make pictures and some backgrounds stylized as Diko-West signs. On each page in an unknown quantity and unknown size. The task was exacerbated 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 for each page and case, by itself, is unrealistic and meaningless. The customer was not one of the “adept explorer 6”, so I decided to simplify my life with a bunch of jQuery and HTML5.

What happened

')
It turned out a small jQuery plugin. The principle is very simple: by the selector we find the necessary pictures, we hide, we create a row of canvases with the same dimensions, into which the original picture is duplicated, we are full of holes. The plugin optionally takes three parameters: an array of the radii of the rounds (in pixels), the thickness of the border and its color (if you need it, of course).

Example:

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

From one to four values ​​can be transferred to an array of radii, 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 upper left and lower right skrugl, the second - 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 top left and further clockwise.

The plug-in works only with images, but with an appropriate level of abnormality or urgent need, styles can also organize backgrounds for blocks of content that are static after the page loads, but with unknown sizes before loading.

Why ctx.globalCompositeOperation for leaky canvass is better than ctx.clip ()

Actually, everything is clear from the picture. Everywhere rounds are like rounds, but in chrome when using ctx.clip (), holes in the canvas come out with stepped ragged edges (everything is fine in other browsers). The solution was found here . On this hell perfectionist ended.

Links

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

Rounds? *

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

Yes, rounds. Circle plus corner. 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, facilitating the work of layout designers and designers, reducing the time to convey their thoughts to colleagues by an average of 4 (four!) Seconds per week. I am more serious than ever. Guys, this is a breakthrough.