Question

In this code (that uses jQuery), the following line in the html

#canvas { height: 500px; background: white; }

sets the height on the canvas to draw on. But if you change the height to a percentage value like this:

#canvas { height: 20%; background: white; }

the canvas doesn’t display at all. Why is that? Thanks for reading.

Answer 1

If the percentage doesn’t work, then it simply means that the parent element doesn’t have a height. In this case, you’d like to give both html and body a height.

html, body { height: 100%; }

Setting it on body only won’t work since its height in turn depends on the html one.

See also this revision of your demo.