HTML5 Canvasを読んでいる①

javascript

こういう書き方になれない

var Debugger = function () { };
Debugger.log = function (message) {
    try {
        console.log(message);
    } catch (exception) {
        return;
    }
}

var Debugger = function () { };
で変数Debuggerに関数オブジェクトを格納して
Debuggerオブジェクトのフィールドlogにlogを吐き出す関数を格納、という見方であっているのだろうか。

まずこれの意味がよくわからん
var Debugger = function () { }; これでも動くんじゃなかろうかと思ったら動いた。
var Debugger = {};

関数オブジェクトは関数とフィールドを持てるという理解でいいのか、ハッシュの場合はフィールドとして関数と、その他の値も持てるという意味で同じような動きをするのかなと思ったけど、関数もオブジェクトなら関数オブジェクトの中に定義された関数はやっぱりフィールドの値なんじゃないのかわからん。

JavaScript - 空の関数オブジェクトを用意するメリットを教えて下さい(36259)｜teratail
わからないので質問してみた。保留。

Imageオブジェクトって何

画像とのこと
JavaScriptリファレンス - Imageオブジェクト：ITpro

Canvasは描画する命令を定義するだけで、描画したものをオブジェクトして保持してたりはしない

       context.fillStyle = "#ffffaa";
        context.fillRect(0, 0, 500, 300);

        //text
        context.fillStyle    = "#000000";
                //このタイミングでfillRectで描画したオブジェクトの色が変わったりはしない
        context.font         = "20px _sans";
        context.textBaseline = "top";
        context.fillText("Hello World!", 195, 80 );

イメージ的にはふつうにペイントで絵をかくときみたいに色を選んでなんかかいて色を選んでなんかかいて、の手順を定義していく、て感じ？

context.textBaseLine

textBaseline プロパティ - Canvasリファレンス - HTML5.JP テキストを配置する時基準とする位置をどこにするのか？の指定

context.textBaseLine = "top";//文字列の一番上が(0,0)に重なる
context.fillText("Test", 0, 0);

x軸バージョンみたいのは無いのかな

toDataURL

キャプチャできる
Canvasオブジェクトを重ねてなんちゃらみたいなことをした場合は駄目な気がするのでキャプチャしたかったらそのCanvasのなかで描画を完結しないといけないんだな

onClickにすべきかaddEventListener('click')にすべきか

このボタン押したらこのスクリプトが走る〜みたいのがonClickのがわかりやすいと思うんだけどaddEventListenerのが美しいとされている気がする
ビューとロジックを分けろ的なアレかな