ＣＡＮＶＡＳとは、Javascriptだけで画像を作成し表示できるＨＴＭＬ５の標準機能の一つです。従来は、Ｗｅｂページでグラフを描画したり画像の修正をしたりするためには、Flashなどの専用アプリが必要でした。それがJavascriptで可能になり、現在はほとんどのブラウザがこのＨＴＭＬ５に準拠し、この機能を標準装備しています。
ＣＡＮＶＡＳ利用では、標準機能以外に多くのアドインが公開されています。これらを用いれば、簡単なアニメーション画像やゲームの作成すらできるようになりました。
ここでは、ＣＡＮＶＡＳに関する基本的な事項をまとめました。私は、エンターティメントよりも数式のグラフ表示や画像処理などに興味があります。それらのプログラムを作成するための、個人用忘備録的な性格が顕著です。
ＣＡＮＶＡＳの概念とそのピクセル情報に関して、最も基本的な事項を示しました。
ＣＡＮＶＡＳで実際に図形を描画するとき、線を引く、長方形を描くなど標準的な機能を利用することが必要です。その主なものを示します。
ＣＡＮＶＡＳで実際に図形を描画するとき、線を引く、長方形を描くなど標準的な機能を利用することが必要です。その主なものを示します。canvasサイズが固定の場合、画像に合わせてcanvasサイズを変える場合、画像をcanvasサイズに縮小して表示する場合を示します。
サイズを固定したＣＡＮＶＡＳに、画像をズーム、回転して表示します。drawImageZPRは汎用関数として利用できます。
FileAPI-FileReaderを用いてダイアログボックスで選択したローカル画像ファイルをＣＡＮＶＡＳ表示します。
画素色変換、フィルタリングなどの基礎的な概念を応用したものです。
数式のグラフ化などでは、ＣＡＮＶＡＳを仮想的なＸＹ座標系のウインドウとして取り扱うのが便利です。この分野では多様なアドオンソフトがありますが、簡単なもの（canvasxy.js）を自作しました。
単純な陽関数 y=f(x) だけでなく、媒介変数系、極座標系、陰関数 f(x,y)=0 などの描画です。Ｗｅｂサイト等から拝借したきれいな図形もあります。また、一部はアニメーション化をしています。
マンデルブロー集合、ジュリア集合などの画像など、数式を用いた幻想的な模様
力学、流体力学、光学、電気などの簡単な理論、
xycoordinate.jsを用いた発展です。ｘ軸正側から時計回りに角度auにｕ軸、角度avにｖ軸をとったｕｖ座標系を設定します。ｕｖ座標系での点をｘｙ座標系に変換したグラフを表示します。
ｕｖ座標系に垂直のｗ軸（ｙ軸に一致）を加えれば３次元座標系になります。それにより w = u*u/2-v のような２変数グラフを表示することができます。
アニメーションでは遅延による動画効果や前の画像を消す残像効果が有用です。ここでは、その基本機能の記述法を示します。
setInterval
setInterval2
AsyncAwaitPromise
requestAnimationFrame