JavaScriptを使ってHTMLキャンバスに半径10ピクセルの円を描くには、次のコードを使います：

```
<html>
  <head>
    <script>
      function drawCircle() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        
        context.beginPath();
        context.arc(100, 100, 10, 0, 2 * Math.PI);
        context.fillStyle = "blue";
        context.fill();
        context.stroke();
      }
    </script>
  </head>
  <body onload="drawCircle()">
    <canvas id="myCanvas" width="200" height="200"></canvas>
  </body>
</html>
```

この例では、getElementById を使用して HTML ドキュメント内の canvas 要素への参照を取得し、getContext を使用して canvas の 2D レンダリング コンテキストを取得しています。beginPath は新しいパスを開始するために呼び出され、arc は指定された中心、半径、開始角度、終了角度で円弧を作成するために使用され、fill と stroke はそれぞれ円の塗りつぶしと輪郭描画に使用されます。

arcメソッドに渡される値を変更することで、円の位置を調整することができ、fillStyleに割り当てられた値を変更することで、塗りつぶしの色を変更することができます。
To draw a circle with a radius of 10 pixels in a HTML canvas using JavaScript, you can use the following code:

<html>
  <head>
    <script>
      function drawCircle() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        
        context.beginPath();
        context.arc(100, 100, 10, 0, 2 * Math.PI);
        context.fillStyle = "blue";
        context.fill();
        context.stroke();
      }
    </script>
  </head>
  <body onload="drawCircle()">
    <canvas id="myCanvas" width="200" height="200"></canvas>
  </body>
</html>

In this example, getElementById is used to obtain a reference to the canvas element in the HTML document, and getContext is used to obtain a 2D rendering context for the canvas. beginPath is called to start a new path, arc is used to create an arc with a given center, radius, start angle, and end angle, and fill and stroke are used to fill and outline the circle, respectively.

You can adjust the position of the circle by changing the values passed to the arc method, and you can change the color of the fill by changing the value assigned to fillStyle.