Canvas doesn't work if parent has display none?

Question

css

I made a switch to show / hide the contents of the div main in js

document.getElementById('main').style.display = 'block';

<div class="main" style="display:none">
<div class="col-sm-8">
            <div class="view-wrapper">
                <div id="container">
                    <canvas id="image"></canvas>
                </div>
            </div>
 </div>
<!-- еще какие то коды -->
 </div>

The problem is that when the block changes display from none to block , the canvas is empty
. In other words, the canvas does not draw an image when display:none.
How to be?

Answer 1

js - looks for id
in html given class

Answer 2

document.querySelector('.main').style.display = 'block';