canvasにaddEventListenerする時は、getContext('2d')してから？

Question

<canvas id="test"></canvas>

---

下記何れかで違いはあるでしょうか？
・どちらが良いとかありますか？
案1.

var ctx = document.getElementById("test").getContext('2d');
ctx.canvas.addEventListener('click', 関数名);

案2.

var ctx = document.getElementById("test");
ctx.addEventListener('click', 関数名)

Answer 1

やっていることに違いはないですが、案１は二度手間感がありますね。
分解するとこういうことです。

var canvas1 = document.getElementById("test")
var context = canvas1.getContext('2d');
var canvas2 = context.canvas; // canvas1 と同じもの
canvas2.addEventListener('click', 関数名);

// ちなみに
var context2 = canvas2.getContext('2d');
var canvas3 = context2.canvas;
var context3 = canvas3.getContext('2d');
var canvas4 = context3.canvas; // 無限に続けられます。

だったら最初から canvas1 を使えばいい話で、それが案2です。
(案2の変数名ctxは context じゃないのでcvsとかのほうがいいと思います。)

Comments

[re97]

・回答＆アドバイスありがとうございました
・大変参考になりました