#mouse position using innerWidth by KilledByAPixel

function u(t) {

c.width=1920 // clear the canvas
for(i=0;i<9;i++)
x.fillRect(400+i*100+S(t)*300,400,50,200) // draw 50x200 rects

} // 122/140

Please log in (or register) to post a dweet (copy-paste the code somewhere safe to save it meanwhile)


    u(t) is called 60 times per second.
    t: Elapsed time in seconds.
    S: Shorthand for Math.sin.
    C: Shorthand for Math.cos.
    T: Shorthand for Math.tan.
    R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
    c: A 1920x1080 canvas.
    x: A 2D context for that canvas.

show FPS hide FPS share fullscreen

KilledByAPixel

remix of d/17720 by u/tomxor

function u(t) {

c.style.cursor='none'
onmousemove=e=>{c.width=innerWidth,x.font='3em"',x.fillText('🐁',e.x,e.y)}

Feb 23 2020 8:11 PM UTC

}// 95/140

Please log in (or register) to post as a new dweet (copy-paste code somewhere safe to save it meanwhile).

#mouse position using innerWidth

u/ElisionFR

Where does innerWidth come from and why does it stop working when I put it outside the event ?
u/ElisionFR

Never mind, if I do that c.width= clears the canvas
u/tomxor

innerWidth is just a global (on window) which in the context of the dweet is the iframe which is conveniently the same size as the canvas... It does work outside of the event handler but you have to remember to move the draw function out as well since it will only draw when mouse is being moved.
u/pavel

onmousemove=e=>x.fillText('🐁',e.x,e.y,c.width=innerWidth,x.font='3em"')
u/KilledByAPixel

nice pavel


      u(t) is called 60 times per second.
      t: elapsed time in seconds.
      c: A 1920x1080 canvas.
      x: A 2D context for that canvas.
      S: Math.sin
      C: Math.cos
      T: Math.tan
      R: Generates rgba-strings, ex.: R(255, 255, 255, 0.5)

dwitter.net