# Other Languages > XML, HTML, Javascript, Web and CSS >  Haha Reactions Emoji In Streaming Live Video in Jquery or asp.net or CSS

## vuyiswamb

Good Day All

i have a Live Stream application and i want to implement the emoji animations that are all over the screen as its done in the video below . can someone direct me to an example that does this.




Thanks

----------


## dday9

The basic idea is that you will need to do the following:
 Create a new <img /> element and setup a timer (e.g. setTimeout) Set the element's position to absolute In the timer, change the element's top/left
 The horizontal movement can be fixed, e.g. move to the left 1px every tick The vertical movement can be "random", e.g. if the top/bottom isn't at the top or bottom of your view area then randomly move it to the top or bottom

I would suggest that you start the process of writing that out and if you run into any specific issues then follow up here asking how to resolve it.

----------


## Schmidt

Emojis are just single characters, and the canvas-method fillText can render text at any x/y-pos...

So, what you need (in a "basic setup") - is actually quite simple:

*html:*


```
<!DOCTYPE html>
<html>
<body>
<canvas id="c1" width="320" height="240" style="background:black" />
</body>
</html>
```

*js-code:*


```
function rr(min, max){
    return Math.floor(Math.random()*(max-min) + min)
}
 
var arr = "😃,🤢,🥶,💔".split(",");
var ctx = document.getElementById("c1").getContext("2d")

setInterval(()=>{ 
  ctx.font = rr(15,30).toString() + "px Arial"
  ctx.clearRect(0, 0, 320, 240)

  arr.forEach((e_char)=>{
    var x = rr(0, 320), y = rr(0, 240)
    ctx.fillText(e_char, x, y)
  })    
}, 100)
```

Ah.. well - have made a fiddle here: https://jsfiddle.net/t8k2bnea/1/

HTH

Olaf

----------

