Draw in hidden html5 canvas element doesnt work

canvas, html, html5-canvas

Solution

You cannot do that.

The canvas, while technically there, cannot be interacted with in that way. You could, however, instruct the canvas to draw a specific image while it's hidden. Just make sure you don't clear it when showing.

The user cannot draw while it is hidden though.

If you just want what is drawn to stay visible after clicking show/hide, remove `ctx.clearRect(0, 0, 100, 100);` from your jQuery.

Problem

I'm trying to draw in a canvas while its parent is `display:none`. Is there a way to do that? Here is a jsFiddle to demonstrate my problem: http://jsfiddle.net/kannix/jSj83/ If you just click draw, everything works as expected. If you click Show/Hide and while hidden, click the Draw Button, a click on Show/Hide will reveal the canvas but its still empty.

Original source