Demo Fiddle

You need to add the class text-center to the div with the id panel-body.

Change your HTML to:

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">Hanoi Tower</div>
        <div class="panel-body text-center">
            <canvas id="stage" class="center-block" width="400" height="220" style="border:1px black solid "></canvas>
            <div id="ctrl" class="center-block">
                <label for="numsel">Disc Number：</label>
                <select id="numsel">
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                </select>
                <button class="btn btn-default" id="start" value="start">Start</button>
                <label for="step">Step：</label> <span class="badge" id="step">0</span>  

            </div>
        </div>
    </div>
</div>

Or change your CSS to add:

.panel-body{
  text-align:center;
}

All the class center-block does is to tell the element to have a margin of 0 auto, the auto being the left/right margins. However, unless the class text-center or css text-align:center; is set on the parent, the element does not know the point to work out this auto calculation from so will not center itself as anticipated.