W3C home > Mailing lists > Public > www-style@w3.org > April 2020

Re: CSS circular image

From: Jordan Friedlander <bigredboots@gmail.com>
Date: Mon, 13 Apr 2020 13:27:33 -0600
Message-ID: <CAAB6wcdsBNWhMkVKQf892p1CtppS+4Ex+_Q-53yOMw3OXWsxCA@mail.gmail.com>
To: Negoita Ionut <johnny.php@gmail.com>
Cc: "L. David Baron" <dbaron@dbaron.org>, "www-style@w3.org" <www-style@w3.org>
It's not pure CSS, but it's possible by drawing to the canvas layer in
html5 with javascript.
It's available for all browsers too (
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
)

HTML:
<canvas></canvas>
<img src="https://www.spring.org.uk/images/crowd2.jpg" id="image1"
class="loadimage" />

CSS:
..loadimage {display:none;}

Javascript:
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(image1, 0, 0, 350, 150);

I made an very quick-and-dirty example here:
https://codepen.io/BIGREDBOOTS/pen/LYpVoeX




On Mon, Apr 13, 2020 at 11:48 AM Negoita Ionut <johnny.php@gmail.com> wrote:

> Hi David,
>
> yes, but that's true only if the image is a square, otherwise setting the
> border-radius of the image to 50% will make an ellipse, not a circle
>
> John
>
> On Mon, Apr 13, 2020 at 8:41 PM L. David Baron <dbaron@dbaron.org> wrote:
>
>> On Monday 2020-04-13 17:57 +0300, Negoita Ionut wrote:
>> > I'm working on a guide on how to do circle images with CSS (presenting
>> an image in a circular shape)
>> >
>> > I know that there is no one good solution that fits all cases, so I am
>> trying to cover all possibilities.
>> >
>> > So far, I've document 3 main methods with some variations detailed here
>> http://www.coding-dude.com/wp/css/css-circle-image/
>> >
>> > Method #1 – Wrapping the image in another element that has
>> a border-radius of 50%
>> >
>> > Method #2 – Using an element and setting the image as the background.
>> Then applying the border-radius to this element
>> >
>> > Method #3 – Using clip-path to clip the image element to a circle.
>>
>> Specifying 'border-radius: 50%' on the <img> itself also works, and
>> seems simpler than the above three.
>>
>> -David
>>
>> --
>> 𝄞   L. David Baron                        https://dbaron.org/   𝄂
>> 𝄢   Mozilla                          https://www.mozilla.org/   𝄂
>>              Before I built a wall I'd ask to know
>>              What I was walling in or walling out,
>>              And to whom I was like to give offense.
>>                - Robert Frost, Mending Wall (1914)
>>
>
>
>
>
Received on Tuesday, 14 April 2020 09:31:25 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:15 UTC