How do I make the first bar pink as wel… by 18sp01

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 1 remix fullscreen

18sp01

function u(t) {

c.width=1920;
  for(i=0;i<10;i++){
  x.fillRect(i*120+T(t)*400, 500, 20, 200);
x.fillStyle=R(255,5,240,0.5)}

Dec 27 2017 2:08 AM UTC

}// 108/140

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

How do I make the first bar pink as well?

u/sigveseb

You need to make sure you set fillStyle before you call fillRect. The canvas context is stateful like that, it remembers the active fillStyle and uses it for all subsequent fill calls until it is set to something else. The default fillStyle after reseting a canvas is black, which is why the first bar is black here :)
u/18sp01

@sigveseb Thank you!


      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