<p>The problem you are seeing, i.e. "jaggies" or "staircasing", is an example of the more general problem known as <em>"aliasing"</em> and, in the graphics field, the term you want to search for is <em>"Antialiasing"</em>. </p>

<p>Aliasing occurs when you undersample a signal. If a signal contains frequencies <em>at</em> or above the <a href="https://en.wikipedia.org/wiki/Nyquist_frequency" rel="nofollow noreferrer">Nyquist Frequency</a>, which is 1/2 the sampling frequency, those higher frequencies will come back "in disguise" i.e. "under an alias".</p>

<p>The example I often give to new starters to explain the problem is:</p>

<blockquote>
  <p><em>Imagine you've started at a new job and work solidly, 9 to 5, <strong>except</strong> for a 1hr break from 12 to 1. <br>
  The boss, however, regularly walks around the building at 12:30 and never sees you at your desk. He therefore concludes you are lazy and so don't get a pay rise</em></p>
</blockquote>

<p>That is an example of aliasing. The boss needs to sample at a (much) higher rate. (Randomised/stratified sampling would also help :-) )</p>

<p>In your line drawing example, I expect you are taking one sample per pixel, but if you do a Fourier analysis of a line, you will see it contains an infinite spread of frequencies. It's these higher frequencies (plus the reconstruction of the sampled results - which I've ignored) that can lead to the jaggy results. </p>

<p>The ideal solution is to low pass filter your incoming signal before sampling it, but that's 'nontrivial' with geometric data.</p>

<p>There are, however, multiple practical approaches to mitigating the problem, including supersampling (SSAA) and multispampling (MSAA), but in your case, perhaps something like <a href="https://en.wikipedia.org/wiki/Xiaolin_Wu&#39;s_line_algorithm" rel="nofollow noreferrer">Wu's method</a> for antialiased line drawing will suffice.</p>

CC BY-SA 4.0
2019-06-21T08:25:26.283Z
2019-06-21T08:25:26.283Z
Simon F
<p>I'm trying to draw a line between two specified points, by updating values in an array which is heightxWidth with each element a set of four bytes (r,g,b,a). In my naive implementation I get the top line which reaches a point with jagged steps in the top line shown below. My question is, how do I accomplish the standard canvas line effect without jumps seen here as the lower line shown below? </p>

<p><a href="https://i.sstatic.net/6uPsq.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/6uPsq.png" alt="enter image description here"></a></p>

CC BY-SA 4.0
2019-06-19T15:44:16.367Z
I don't know what "the standard canvas" is, but it sounds like the term you want to search for is "antialiasing", e.g. https://en.wikipedia.org/wiki/Xiaolin_Wu's_line_algorithm
Simon F
CC BY-SA 4.0
2019-06-19T21:21:15.473Z
yes this is exactly what I was looking for!
Li Brary
<algorithm><javascript><line-drawing>
Non jagged line algorithm for javascript canvas
Li Brary
# Non jagged line algorithm for javascript canvas

(Asked by: username_0 on 2019-06-18)

I'm trying to draw a line between two specified points, by updating values in an array which is heightxWidth with each element a set of four bytes (r,g,b,a). In my naive implementation I get the top line which reaches a point with jagged steps in the top line shown below. My question is, how do I accomplish the standard canvas line effect without jumps seen here as the lower line shown below?

[![enter image description here](https://i.sstatic.net/6uPsq.png)](https://i.sstatic.net/6uPsq.png)

**Tags:** algorithm, javascript, line-drawing

> **Comments:**
> **username_1**: I don't know what "the standard canvas" is, but it sounds like the term you want to search for is "antialiasing", e.g. https://en.wikipedia.org/wiki/Xiaolin_Wu's_line_algorithm  
> **username_0**: yes this is exactly what I was looking for!  

---

## 1 answers

### Answer by username_1 on 2019-06-21. Score: 2 | Accepted answer

The problem you are seeing, i.e. "jaggies" or "staircasing", is an example of the more general problem known as *"aliasing"* and, in the graphics field, the term you want to search for is *"Antialiasing"*.

Aliasing occurs when you undersample a signal. If a signal contains frequencies *at* or above the [Nyquist Frequency](https://en.wikipedia.org/wiki/Nyquist_frequency), which is 1/2 the sampling frequency, those higher frequencies will come back "in disguise" i.e. "under an alias".

The example I often give to new starters to explain the problem is:

> *Imagine you've started at a new job and work solidly, 9 to 5, **except** for a 1hr break from 12 to 1.   
> The boss, however, regularly walks around the building at 12:30 and never sees you at your desk. He therefore concludes you are lazy and so don't get a pay rise*

That is an example of aliasing. The boss needs to sample at a (much) higher rate. (Randomised/stratified sampling would also help :-) )

In your line drawing example, I expect you are taking one sample per pixel, but if you do a Fourier analysis of a line, you will see it contains an infinite spread of frequencies. It's these higher frequencies (plus the reconstruction of the sampled results - which I've ignored) that can lead to the jaggy results.

The ideal solution is to low pass filter your incoming signal before sampling it, but that's 'nontrivial' with geometric data.

There are, however, multiple practical approaches to mitigating the problem, including supersampling (SSAA) and multispampling (MSAA), but in your case, perhaps something like [Wu's method](https://en.wikipedia.org/wiki/Xiaolin_Wu's_line_algorithm) for antialiased line drawing will suffice.


---

