JavaScript DOM など

document.querySelector で要素が見つからない．

• id 名の前に # がない．
• クォーテーションで括られていない．
• # を間違えて $ ．

document.getElementById

• id 名に # はつけない．

変数の宣言　var , const , ...

• var は古い形式．
• 今後は let ．
• 変更しないものは const ．
• var は，同じ変数名で異なる用途に利用できた？

canvas

    <canvas    id='canvas' width="300" height="300"> </canvas>
    <script>
        const    canvas   = document.getElementById("canvas") ;
        const    context  = canvas.getContext('2d') ;
        context.fillStyle = "rgb(240,240,240)" ;
        context.fillRect(0,0,300,300) ;
        context.strokeRect(10,10,canvas.width-20,canvas.height-20) ;
        </script>
    

    arc などを使用する時は 
        context.beginPath() ;
        context.arc(100,100,50,0,Math.PI*2) ;
        context.stroke() ;

    strokeText と fillText 
        context.font でフォントを指定する必要がある．デフォルトは小さい．
        context.fillStyle , context.strokeStyle で色を指定する．

    線の属性などの保存
        transform を使用して使い方を間違えると，描画の度に表示が異なりうまくない．
            transform で対応しようとすると 3 次の単位行列でリセットする必要がある．
        他に lineWidth なども context.lineWidth = 1 ; などとする必要がある．
        動作としては「スタック」．
        
        context を取得した直後に save して，描画が終わった後 restore でデフォルトに戻せる．
            function  draw_canvas   (....)   {
                const canvas  = document.getElementById("canvas") ;
                const context = canvas.getContext('2d') ;
                context.save() ;
            //   ... 
                context.restore() ;
                }