有可以用 id 的方法

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');

以及沒有 id 只有 canvas 標籤時

var cvs = document.getElementsByTagName('canvas');
var ctx = cvs[0].getContext('2d');

canvas[0] 在網頁有多個 canvas 時就很好用了
[0] 是指在 HTML 裡的第幾個 canvas

又想再縮短合併成一行的話

var ctx = document.getElementById('canvas').getContext('2d');

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

到這裡突然發現 class 好像也可以這麼做

var ctx = document.getElementsByClassName('canvas')[0].getContext('2d');

然後...終於...可以抓到相同是 class="canvas" 第幾個的畫布了

原來我在第一天時搞錯了
居然用到了 querySelector 和 querySelectorAll 才會抓不到第2個之後的