グラフのｘ、ｙ軸に適切な数値を表示させたい

前提・実現したいこと

軸に数値を入力したいのですがやり方が分かりません。教えてください。

ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>

<!-- ── スタイルシート ── -->
<style>
#graph { background: #eee; }
</style>

</head>
<body>

<!-- ── キャンバス ── -->
<canvas id="graph" width="800" height="600"></canvas>

<!-- ── スクリプト ── -->
<script>
/* ── 評価する関数 ── */
const F = x => x*x**2-3

/* ── 関数：二分法 ── */
const bisection = ( f, a, b, e ) => { //bisecetion 二等分
if( a>=b || f( a )*f( b )>=0 ){ return }
const slope = f( b )-f( a ); //slope 傾斜
let mid;
do {
mid = ( a+b )/2;
a =
f( mid )>0 ? ( slope>0 ? a : mid ) :
f( mid )<0 ? ( slope>0 ? mid : a ) : mid ;
b =
f( mid )>0 ? ( slope>0 ? mid : b ) :
f( mid )<0 ? ( slope>0 ? b : mid ) : mid ;
} while( b-a>e );
return mid ;
}

/* ── 二文法を実行 ── */
const result = bisection( F, 0, 2, 0.0001 );
console.log( result );

/* ── グラフ描画 ── */
// キャンバス
const canvas = document.getElementById( "graph" );
const width = canvas.width, height = canvas.height;
// コンテキスト
const context = canvas.getContext( "2d" );
// 座標
const rate = width*0.1;
const range = { x: 4.5, y: 3.5 };
const cx = result || 0, cy = 0; //result:関数の答え
const uo = width/2-cx*rate, vo = height/2+cy*rate; //uo:幅、vo:高さ、
const u = x => uo+x*rate; 
const v = y => vo-y*rate;

// 描画：座標軸
context.strokeStyle = "#999"; //ネズミ色
context.lineWidth = 1; //線の幅
context.beginPath();
context.moveTo( u( cx-range.x ), vo );
context.lineTo( u( cx+range.x ), vo );
context.moveTo( uo, v( cy-range.y ) );
context.lineTo( uo, v( cy+range.y ) );
context.stroke();

// 描画：グラフ
context.strokeStyle = "#666";
context.lineWidth = 2;
context.beginPath();
context.moveTo( u( cx-range.x ), v( F( cy-range.x ) ) );
for( x=cx-range.x; x<=cy+range.x; x+=0.01 ){
context[ F(x)<range.y && F(x)<range.y ? "lineTo": "moveTo" ]( u( x ), v( F(x) ) );
}
//x,yの座標を描画
context.stroke();

// 描画：二分法の解
if( result !== undefined ){
context.fillStyle = "#fcc"; //赤
context.strokeStyle = "#f00";//赤
context.lineWidth = 1;
context.beginPath();
context.arc( u( result ), vo, 8, 0, Math.PI*2 ); //円弧を作成する、（円弧の中心、半径、開始角度、終了角度）
context.fill();
context.stroke();
}
</script>

</body>
</html>

試したこと

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

ご質問から日数が経過しているので解決済みかもしれませんが。

js
1// 描画：目盛り
2for( x=cx-range.x; x<=cx+range.x; x+=STEP ) {
3  context.fillText(FORMAT(x), x*SCALE, POS_Y);
4}
5
6for( y=cy-range.y; y<=cy+range.y; y+=STEP ) {
7  context.fillText(FORMAT(y), POS_X, y*SCALE);
8}
9