超出范围时，画布对象不会消失

Question

我有以下代码，每隔一段时间创建一个画布，在其上放置一个灯泡图像，并将所有黄色像素更改为传入的颜色。当灯泡的颜色发生变化时，您仍然能够在canvas选项卡下的safari中查看控制台中的所有旧画布对象。这是否意味着他们占用了记忆？当它们超出范围时它们是否应该消失（当颜色改变并使用新的灯泡时）？

// Set colour of light bulb
function set_bulb_colour(img_id, rgb_colour)
{
    // Load the light bulb image in and redraw it with the new colour
    var img = new Image();

    img.onload = function()
    {
        var canvas = document.createElement('canvas');

        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        var image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < image_data.data.length; i += 4)
        {
            // If the pixel is yellow set it to the new colour
            if (image_data.data[i + 3] != 0 && (image_data.data[i] > 200 && image_data.data[i + 2] < 100))
            {
                image_data.data[i] = rgb_colour[0];
                image_data.data[i + 1] = rgb_colour[1];
                image_data.data[i + 2] = rgb_colour[2];
            }
        }

        ctx.putImageData(image_data, 0, 0);

        // Set the image src to the bulb with the new colour
        $(img_id).attr('src', canvas.toDataURL());
    }

    img.src = 'images/light_bulb.png';
}

在这里你可以看到有多个画布，紫色和红色已经消失，现在显示粉红色，但红色和紫色的不会消失，是否会耗尽内存？每次颜色更改时，新的画布都会添加到队列中，我希望删除旧的画布。希望我解释说好。

编辑：imd_id在某一刻始终是相同的，因此新图片只会替换旧图像。