Canvas HTML - can someone draw me this? 〰

Question

I never coded in Canvas, but seen examples. So I just want to see how you would draw this: 〰

Answer 1

That's called a sine wave!

https://code.sololearn.com/Wy2Lrg24jihj/?ref=app

Important to know is that sine waves move between -1 and 1.
However our canvas goes from 0 to 400.

So we have to scale the sine wave by a factor of 100 and add 200 to move it into position:
[-1; 1] * 100 = [-100; 100]
[-100; 100] + 200 = [100; 300]

Which means it fits in our 400 pixel canvas with some extra space top and bottom.

Sine waves also repeat every 2π units (which is about 6.28...), so we also have to scale the x-axis some, otherwise we would draw too many squiggles.

In total we arrive at
Math.sin(x / 20) * 100 + 200

But you can try changing the numbers to see what it does.

Answer 2

Schindlabua , yup. it works.
Thank you!

Answer 3

Schindlabua i don't see anything on the code, do u see anything visual?

Answer 4

Schindlabua yeah that's probably what it is. i still dont see it.

Answer 5

Ginfio Yeah. I was using newer javascript features, maybe your phone doesn't know those. I changed it—try again!

Answer 6

Ginfio ok hmm I changed it once more, it really should run everywhere now. Can I ask what device you are using?