javascript，在函数中动态加载画布和绘图上下文； 上下文消失了

Question

To summarize, I am changing what canvases are shown via ajax calls and what gets drawn on each as well. The main problem is that my main drawing function fails on getContext and there is other weird behavior like missing canvases (but they are definitely there).

Here is the function I use to draw on my canvases:

function PlotSet(plot_properties){
    var p = plot_properties;
    var canvas = document.getElementById(p.panel_name);
    var spinner_target = document.getElementById(p.spinner_name);
    if (!canvas) {
        alert('Error: Cannot find the canvas element!');
        return;
    } else if (!canvas.getContext) {
        alert('Error: Canvas context does not exist!');
        return;
    } else {
        var ctx = canvas.getContext('2d');
        /*Do the drawing*/
    }
}

I have 3 buttons in a section of my page that determine how many and the arrangement of the panels/canvas. When someone clicks one, another php page with that arrangement is loaded.

<div id="panel_single" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-one-panel"></div>
<div id="panel_split" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-four-panel"></div>
<div id="panel_rows" name="panel_control" class="xs-btn sm-btn-h-grp sm-btn-list-panel"></div>
<script>
    $("#panel_single_settings").hide();
    $("div[name=panel_control]").click(function(event) {
        var nav_id = $(this).attr("id");
        if(nav_id == "panel_single"){
            $("#panel_single_settings").show();
        }else{
            $("#panel_single_settings").hide();
        }
        //$("span[name=vnav-text]").removeClass("vnav-active");
        //$("#" + nav_id).addClass('vnav-active');
        refresh_content($(".widget-panel"), nav_id, function(){
            side_panel_hide($(".side_panel"), "600px");
        });
    });
</script>

Everything works when I click on these after loading page. But I have two issues when changing the drawing properties/redrawning. (1) the PlotSet function fails on getContext for everything except the first canvas, when multiple canvases are shown, when this function is used to redraw an already drawn canvas (using a pop-up form with ajax to set what is redrawn). (2) When only one panel is shown, the settings can be changed and the panel can be redrawn, but then when I then load a page with multiple panels, all panels but the first are blank (ie this page functions as expected, except when I redrawn a canvas on another page).

Single Panel example:

<script>
    var plot_properties = {
        //Settings to draw
    }
    PlotSet(plot_properties);
</script>

example of multi panel configuration:

<canvas class="analytics-graph-medium" id="graph_send"></canvas>        
<canvas class="analytics-graph-medium" id="graph_recv"></canvas>
<canvas class="analytics-graph-medium" id="graph_cpu"></canvas>
<canvas class="analytics-graph-medium" id="graph_ram"></canvas>


<script>
    var split_send_plot_properties = {
        //Settings to draw
    }
    PlotSet(split_send_plot_properties);

    var split_recv_plot_properties = {
        //Settings to draw
    }
    PlotSet(split_recv_plot_properties);
    .
    .
    .
    //**************************************************************
    //Panel Settings Events
    //**************************************************************
    $("#cpu_panel_settings").on("click", function(){
        var panel_name = $(this).attr('id');
        set_side_panel_html($(".side_panel"), "/gui/pages/status/dialogs/panel_settings.php", split_cpu_plot_properties, function(){
            side_panel_show($(".side_panel"), "500px");
        });
    });
    .
    .
    .
</script>

And this is the submit button action for changing the settings:

$("#mod_panel").click(function(){
            plot_properties = {
                //lots of properties to be drawn
            }
            PlotSet(plot_properties);
            side_panel_hide($(".side_panel"), "600px");
        });

Answer 1

Well, I seem to have solved the problem. I still do not understand the problem, but the solution is to add a new canvas with the same name, remove the old canvas and them to re-grab the new canvas with the same old name with getElementById. But only do that when the canvas can be found, but the context does not exist... otherwise use the original context.

function PlotSet(plot_properties){
        var p = plot_properties;
        var spinner_target = document.getElementById(p.spinner_name);
        var canvas = document.getElementById(p.panel_name);
        if (!canvas) {
            alert('Error: Cannot find the canvas element!');
            return;
        } else if (!canvas.getContext) {
            var new_canvas = document.createElement(p.panel_name);
            canvas.parentNode.insertBefore(new_canvas, canvas.nextSibling);
            canvas.parentNode.removeChild(canvas);
            canvas = document.getElementById(p.panel_name);
        } 
        var ctx = canvas.getContext('2d');
        //Draw Something
}

This makes everything work, all the dynamic page loading with multiple canvases on them, plus changing settings/drawing of any canvas, and switching pages after a chane is made.

If anyone has any futher insight into what caused the problem or why this solution worked, I'm eager ears.