Элемент холста не может быть нарисован после перехода отображения jquery

Question

Я создаю приложение для рисования, используя холст. Работает нормально, если показан div, содержащий элемент canvas. Однако я хочу сначала скрыть содержащий div и затем «запустить» приложение для рисования, используя переход jquery для исчезновения в интерфейсе рисования. Таким образом, содержащему div изначально присваивается свойство css 'display', равное 'none', а затем я показываю его. Однако когда я это сделаю, элемент canvas больше не будет получать никаких графических данных. Я попытался настроить отображение: ни один динамически после рендеринга элемента 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>

Затем вызывается эта функция, которая создает элемент canvas как дочерний элемент для элемента "draw":

//creating canvasses
function drawCanvas(id,xOffset){
    //draw
    var canvas = document.createElement("canvas");
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    canvas.id = id;
    $('#draw').append(canvas);
}

И когда пользователь нажимает кнопку, чтобы открыть модуль рисования:

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;» из таблицы стилей, чтобы холст отображался при загрузке страницы, все работает нормально. Но если он скрыт и затем показан, вы можете не рисовать на нем.

Answer 1

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

Можете ли вы использовать видимость: скрытый вместо дисплея: нет? Таким образом, элемент остается на странице просто невидимым невооруженным глазом?

Если вы хотите, чтобы он снова был виден, просто напишите

  visibility:visible;

или в вашем коде

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