Canvas .scale方法无法处理click事件

Question

我正在尝试使用scale方法在使用Web Audio API绘制波形数据后进行放大。

该方法可以自行运行，但在尝试点击事件时不起作用。 我的代码有什么问题？

以下是jsfiddle链接：http://jsfiddle.net/ehsanziya/YMKBK/1/

这是我的代码：

var context = new webkitAudioContext();
var canvas = document.getElementById('vis');
var width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext('2d');

var request = new XMLHttpRequest();
request.open('GET', 'http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3', true);
request.responseType = "arraybuffer";

request.onload = function () {
    context.decodeAudioData(request.response, function (buffer) {
        buffer = buffer;
        data = buffer.getChannelData(0);
        //console.log(data);


        var step = data.length / width;
        //console.log(data[500]*height);

        for (var i = 0; i < data.length; i++) {
            ctx.fillStyle = 'black';
            ctx.fillRect(i / step, height / 2, 1 / step, (data[i] * height));
        }
    });
};
request.send();
//it works down here
//ctx.scale(20,1);
$('#button').click(function () {
    ctx.scale(20, 1);
});