<p>I was making some circles in the HTML Canvas element and the circles were so smooth. In a sense that you cant see any vertices. </p>

<p>I normally work in unity and I you make a shape in 3d you most of the time see vertices (aka not a perfectly smooth circle). It only really looks smooth if you crank the vertices count up to something like 100 - 150 But this would be highly inefficient to render. </p>

<p>So now my question: How does HTML canvas manage to draw such smooth circles? Is this A: with a very high vertices count, or B: some other magic is used if so how do they do it?</p>

<p>Let me know if anything is unclear or needs extra information. </p>

CC BY-SA 4.0
2020-03-23T09:55:56.003Z
You can draw a circle in 2D without representing it through triangles - see Bresenham's algorithm for example.
lightxbulb
CC BY-SA 4.0
2020-03-27T07:23:36.530Z
Wouldn't that require you to rasterise it pixel-by-pixel, in HTML ?  (Sorry if that sounds ignorant, I don't know HTML)
PaulHK
<performance><2d-graphics>
How are 2D graphics rendered in HTML canvas
FutureCake
# How are 2D graphics rendered in HTML canvas

(Asked by: username_0 on 2020-03-23)

I was making some circles in the HTML Canvas element and the circles were so smooth. In a sense that you cant see any vertices.

I normally work in unity and I you make a shape in 3d you most of the time see vertices (aka not a perfectly smooth circle). It only really looks smooth if you crank the vertices count up to something like 100 - 150 But this would be highly inefficient to render.

So now my question: How does HTML canvas manage to draw such smooth circles? Is this A: with a very high vertices count, or B: some other magic is used if so how do they do it?

Let me know if anything is unclear or needs extra information.

**Tags:** performance, 2d-graphics

> **Comments:**
> **username_1**: You can draw a circle in 2D without representing it through triangles - see Bresenham's algorithm for example.  
> **username_2**: Wouldn't that require you to rasterise it pixel-by-pixel, in HTML ?  (Sorry if that sounds ignorant, I don't know HTML)  

---

## 0 answers

