Robię pierwsze próby z HTML5 i Canvas. Na początek chciałbym uzyskać taki efekt, że jest suwak i płótno, jak się zmienia wartość suwaka, to zmienia się położenie odcinka na płótnie.

Jak widać, rysowanie jest zrobione dokładnie tak, jak tutaj:
http://www.w3schools.com/graphics/canvas_drawing.asp
http://www.w3schools.com/graphics/canvas_coordinates.asp

Problem jest taki, ze jak odkomentuję rysowanie okręgu, to działa tak, jak chciałem, a jak zakomentuję rysowanie okręgu (tak, jak teraz jest w przedstawionym kodzie), to żółty prostokąt nie zamalowuje odcinka i pojawiają się wszystkie namalowane odcinki. Co jest tego przyczyną i gdzie popełniłem błąd? Robiłem takie rzeczy w C++ i w Javie na bitmapie i nigdy się nie spotkałem z tym, żeby prostokąt nie zamalował poprzedniego rysunku.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Untitled</title>
 </head>
 <body>
  <script type="text/javascript">
   function f()
   {
    var ctx = document.getElementById("Bmp").getContext("2d");
    var Val = document.getElementById("Rng").value;

    // Zamalowanie poprzedniego rysunku
    ctx.fillStyle = "#FFFF00";
    ctx.fillRect(0,0,640,480);

    // Namalowanie linii
    ctx.moveTo(0,0);
    ctx.lineTo(200,Val);
    ctx.stroke();

    // Namalowanie okregu
    //ctx.beginPath();
    //ctx.arc(Val * 2,50,40,0,2*Math.PI);
    //ctx.stroke();

    // Wyswietlenie wartosci suwaka
    document.getElementById("RngL").innerHTML = Val;
   }
  </script>
  <form name="MainForm">
   <canvas id="Bmp" width="640" height="480"></canvas>
   <input id="Rng" type="range" min="0" max="300" oninput="f()" />
   <span id="RngL">0</span>
  </form>
 </body>
</html>

Testowałem na Firefox 48.0.2

Inny przykład, jeszcze prostszy, na którym też widać problem

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="500"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Pierwsza linia
ctx.moveTo(10,0);
ctx.lineTo(200,100);
ctx.stroke();

// Pełny prostokat, ktory czesciowo zamalowuje linie
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,100,40);

// Druga linia, jej namalowanie powoduje odmalowanie pierwszej linii na tle prostokata, co nie jest pozadane w moim przypadku
ctx.moveTo(50,100);
ctx.lineTo(200,120);
ctx.stroke();



</script>

</body>
</html>