Weird behaviour of html5 path

Question

I'm trying to produce a little html5 animation for a family member: A river with flowing paragraphs. This is actually nowhere professional. We'd just like to know what is possible with html5.

The setup is as following: We have a canvas and a javascript file named painter.js. The script has two jobs: display and move the paragraphs and render someting like water.

The paragraphs are rather straightforward: simple png images that are stretched and moved from one side to the other.

The water however is problematic. My idea was to create a path and fill it with a gradient that slowly goes from bright-blue to dark-blue / black. Here's some code, please note:

This code comes from inside the function water() which is called repeatedly before the paragraphs are rendered and after the canvas has been cleared. The canvas has a width of 400px and a height of 500px. There should be waves on the surface of the river, thus the calls to quadraticCurveTo(). waterlevel stays constant - I wanted to play with it, therefore its a variable. wavesize however is modified with every execution. This is not the entire function water() I've spared you the tedious part about in- or decreasing wavesize.

context.beginPath();

context.moveTo(0,waterlevel);
context.quadraticCurveTo(50,waterlevel-wavesize,100,waterlevel);
context.moveTo(100,waterlevel);
context.quadraticCurveTo(150,waterlevel+wavesize,200,waterlevel);
context.moveTo(200,waterlevel);
context.quadraticCurveTo(250,waterlevel-wavesize,300,waterlevel);
context.moveTo(300,waterlevel);
context.quadraticCurveTo(350,waterlevel+wavesize,400,waterlevel);
context.moveTo(400,waterlevel);
context.quadraticCurveTo(450,waterlevel-wavesize,500,waterlevel);
context.moveTo(500,waterlevel);
context.lineTo(500,400);
context.moveTo(500,400);
context.lineTo(0,400);
context.moveTo(0,400);
context.lineTo(0,150);
context.moveTo(0,150);

context.fillStyle=my_gradient;
context.fill();

As opposed to my intentions the result is this:

My first idea was that the path was messed up but replacing context.fill() with context.stroke() shows this:

Can you help me? Any idea how to fill a custom path with a custom gradient ? If you have a link or sample code, I'd be glad.

Thank you for your time

Answer 1

Get rid of all of your moveTo 's so you have just:

context.moveTo(0,waterlevel);
context.quadraticCurveTo(50,waterlevel-wavesize,100,waterlevel);
context.quadraticCurveTo(150,waterlevel+wavesize,200,waterlevel);
context.quadraticCurveTo(250,waterlevel-wavesize,300,waterlevel);
context.quadraticCurveTo(350,waterlevel+wavesize,400,waterlevel);
context.quadraticCurveTo(450,waterlevel-wavesize,500,waterlevel);
context.lineTo(500,400);
context.lineTo(0,400);
context.lineTo(0,150);

You shouldn't be using moveTo for this type of shape. Drawing on the canvas is like using a pen, if you draw a line somewhere, thats where the pen tip ends up. You only want to use moveTo if you are picking up your pen to bring it somewhere without drawing a line (or curve) to that place.