等脚台形をcanvasで描画したい

Question

等脚台形をcanvasで描画したいです。

下の画像のような図をcanvasで描画したいです。

等脚台形なので、角度は一定です。
水の部分を描画するのが難しくできませんでした。
また、x, yの2次元で表したとき、yは可変にして、javascriptで値を変更すると水の部分を増やしたり減らしたりしたいです。
何かいい方法や、ライブラリはないでしょうか？

Answer 1

コップと水は一辺と二角を共有する形になりますから、コップが描けるなら水も描けるはずです。

コップの側面の部分は直角三角形（の斜辺）となりますが、方程式は分かるはずです。
あとは水の高さを元に方程式を解いて、斜辺上の x 位置を特定すれば、線分が描けます。
※逆側も同様

コップの側面の傾きを角度で与えたいなら、三角関数を使って縁の位置を計算しましょう。