# Creating Motion Trails | KIRUPA

**URL:** https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223
**Category:** programming
**Created:** [March 20, 2017, 5:29am UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223 "2017-03-20T05:29:05Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 20, 2017, 5:29am UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/1 "2017-03-20T05:29:05Z")

</div>

by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 15 March 2016

Have you ever seen a comet or a meteor streaking across the sky? It looks something like this:

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/canvas/creating\_motion\_trails.htm](http://www.kirupa.com/canvas/creating_motion_trails.htm)

---

<div class="post-metadata">

### Author: ![Giulio](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@Giulio](https://forum.kirupa.com/u/Giulio)
#### Post date: [April 17, 2018, 3:02pm UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/2 "2018-04-17T15:02:34Z")

</div>

Hi there,  
First off: congrats, you are just very very good at teaching stuff.  
Following on the motion trails post.  
The motion trail is never continuous and linear but rather gapy as if the previous positions were drawn every some pixels.  
How do i get a continuous line? Thanks lot

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 18, 2018, 6:43am UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/3 "2018-04-18T06:43:43Z")

</div>

Are you trying to re-create something similar to a pen going across the screen? 🙂

---

<div class="post-metadata">

### Author: ![Giulio](https://avatars.discourse-cdn.com/v4/letter/g/45deac/32.png) [@Giulio](https://forum.kirupa.com/u/Giulio)
#### Post date: [April 18, 2018, 8:44am UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/4 "2018-04-18T08:44:36Z")

</div>

Correct, how do I do that?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 20, 2018, 7:32pm UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/5 "2018-04-20T19:32:51Z")

</div>

Apologies for the delay. If you clear this line, your previous lines will still remain:

`context.clearRect(0, 0, canvas.width, canvas.height);`

You can play with this to selectively redraw only parts of your UI while keeping the other parts static 🙂

---

<div class="post-metadata">

### Author: ![gwgwpl](https://avatars.discourse-cdn.com/v4/letter/g/e56c9b/32.png) [@gwgwpl](https://forum.kirupa.com/u/gwgwpl)
#### Post date: [March 6, 2019, 7:22pm UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/6 "2019-03-06T19:22:18Z")

</div>

Hello, how can i force particle to move using not-random, but defined inside array/json file directions? Like i have many points on canvas starting from 0,0 and my particle should move to 100,100 then 200,300 then 66,66 in order ?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 9, 2019, 5:18pm UTC](https://forum.kirupa.com/t/creating-motion-trails-kirupa/636223/7 "2019-03-09T17:18:21Z")

</div>

Sorry for missing this earlier. Do you need it to move through those same points all the time, or will the points change at any point?
