Невозможно нарисовать элемент холста после перехода на экран jQuery

Question

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

Тогда эта функция вызывается, которая создает элемент холста, как ребенок из «рисовать» DIV:

//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(); 
}); 

И, наконец, S функция рисования:

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; 

}

Теперь, если я держу все то же самое, но просто удалить «дисплей: нет;» из таблицы стилей, так что холст отображается, когда страница загружена, все работает нормально. Но если он скрыт, а затем показан, вы не можете на него нарисовать.

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'); 
});