HTML5 Canvas在边缘处消失

Question

我正在使用来自http://www.script-tutorials.com/html5-fire-effect/这个整洁的小代码片段的“火”效果，但是因为我想在没有背景图像的情况下使用它，我试图弄清楚如何不使用它的硬边缘火焰周围的帆布。我一直在经历这个功能，但由于这是我第一次使用canvas，我不理解如何控制动画。如果你继续上面的教程链接，你会看到我在下面发布的摘录中的完整代码。我相信这是实际绘制火焰的部分。

function drawScene() { // main drawScene function
clear(); // clear canvas

var data_cnt = data_width * (data_height - 1);
for (var i = 0; i < data_width; i++) {
    out_data[data_cnt + i] = (0.7 > Math.random()) ? 255 : 20;
}

for (var y = 0; y < 100; y++){
    for (var x = 0; x < data_width; x++){
        var s = data_cnt + x;

        var temp_data = out_data[s] + out_data[s + 1] + out_data[s - 1] + out_data[s - data_width];
        temp_data >>= 2;
        if (temp_data > 1){
            temp_data -= 1;
        }
        temp_data <<= 0;

        out_data[s - data_width] = temp_data;

        var id = s << 2;
        img_data.data[id + 0] = colors[temp_data].r; // red
        img_data.data[id + 1] = colors[temp_data].g; // green
        img_data.data[id + 2] = colors[temp_data].b; // blue
        img_data.data[id + 3] = colors[temp_data].a; // alpha 
    }
    data_cnt -= data_width;
}

// draw result data
ctx.putImageData(img_data, 0, 0);

}

我不知道是否有人能帮助或至少指出我正确的方向。有没有办法

a）改变火焰的“锯齿状”效果（如黄色），因为它们不会切断于食堂的边缘

或

b）使整个动画在画布边缘周围变得柔和还是淡化？

我一直在网上搜索标准的HTML5画布火焰教程，但它们要么非常复杂，要么非常俗气。如果有人知道一个好的选择，请告诉我。