画布元素可以'；不能在jquery显示转换后绘制

我正在使用画布创建一个绘图应用程序。如果显示包含canvas元素的div，则可以正常工作。但是，我希望首先隐藏包含的div，然后使用jquery转换“启动”绘图应用程序，以便在绘图界面中淡入淡出。因此，包含div的css'display'属性最初设置为'none'，然后我显示它。但是，当我这样做时，canvas元素将不再接收任何图形输入。我已经尝试设置显示：在脚本渲染画布元素后动态设置为“无”，以确保没有干扰，但没有骰子。有什么建议吗

以下是绘图界面的html结构：

<!--DRAWING INTERFACE-->
    <style>
       #draw-container {
         display:none;
         width:1920px;
         height:1080px;
         position:absolute;
         top:0px;
         left:0px;
       }
     </style>
<div id="draw-container">
    <h1>Send a Drawing</h1>
    <div id="draw" class="panel">
    </div>
    <div id="draw-buttons">
        <a id="sendButton" href="#" class="round">></a>
        <a id="clearButton" href="#" class="round">+</a>
    </div>
</div>

当用户单击按钮以显示绘图模块时：

document.getElementById('drawLaunch').addEventListener("click", function(){
    $('#draw-container').show();
});

最后，这里是绘图功能：

function _drawCircle(mouseX, mouseY) {
//get position
var x = mouseX - offsetLeft,
    y = mouseY - offsetTop;
//move mouse to the previous point
if (lastX == null) {
    lastX = x;
    lastY = y;
}
context.moveTo(lastX,lastY);
//draw line
context.lineTo(x, y);
context.stroke();
//set new last point
lastX = x;
lastY = y;

}

现在，如果我保持一切不变，只是删除“display:none；“从样式表中，加载页面时显示画布，一切正常。但如果隐藏并显示，则无法在其上绘制

 #draw-container {
     visibility:hidden;
     width:1920px;
     height:1080px;
     position:absolute;
     top:0px;
     left:0px;
   }

你能用visibility:hidden而不是display:none吗？这样元素在页面上就不会出现，只是肉眼看不见

当你想让它再次可见时，只需写下

  visibility:visible;

或者在你的代码中

document.getElementById('drawLaunch').addEventListener("click", function(){
    $('#draw-container').css('visibility','visibile');
});

---

在我的回答中增加了一点谢谢，这很有效！只是给其他需要的人一个提示--它应该是“可见的”，而不是“可见的”。很抱歉输入错误-请检查我的答案是否正确。谢谢！我更新了代码，使其可见

document.getElementById('drawLaunch').addEventListener("click", function(){
    $('#draw-container').css('visibility','visibile');
});