如何使绘图画布在Bootstrap布局中工作？

Question

我目前在使用Bootstrap布局中使用基本绘图画布时遇到问题。它在Bootstrap列之外使用时有效，但在内部使用时似乎无法工作（我的意思是它没有输入/显示绘图）。

以下是HTML代码：

<div class="row">
    <div class="col-md-3">
        <div class="content-box text-center">
            <h1 id="upd-timer">--</h1> seconds
        </div>
        <div class="content-box">
            <b>Scoreboard</b><hr>
            <div id="upd-scoreboard"></div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="content-box">
            <b>Drawing Board</b><hr>
            <canvas id='draw-board' height='500' width='500'></canvas>
        </div>
    </div>
    <div class="col-md-3">
        <div class="content-box">
            <b>Game Chat</b><hr>
            <div class="game-chat game-chat-lobby" id="upd-game-chat"></div>
            <input type="text" class="form-control" id="game-chat-form">
        </div>
    </div>
</div>

以下是绘图画布的JS代码：

var clickX = new Array ();
var clickY = new Array ();
var clickDrag = new Array ();

var paint;

function createDrawBoard ()
{
    var canvas = document.getElementById  ('draw-board');
    context = canvas.getContext  ('2d');

    $ ('#draw-board').mousedown (function (e)
    {
        var mouseX = e.pageX - this.offsetLeft;
        var mouseY = e.pageY - this.offsetTop;

        paint = true;
        addClick (e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        redraw ();
    });

    $ ('#draw-board').mousemove (function (e)
    {
        if  (paint)
        {
            addClick (e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
            redraw ();
        }
    });

    $ ('#draw-board').mouseup  (function (e)
    {
        paint = false;
    });

    $ ('#draw-board').mouseleave  (function (e)
    {
        paint = false;
    });
}

function addClick (x, y, dragging)
{
    clickX.push (x);
    clickY.push (y);
    clickDrag.push (dragging);
}

function redraw ()
{
    context.clearRect (0, 0, context.canvas.width, context.canvas.height);

    context.strokeStyle = '#df4b26';
    context.lineJoin = 'round';
    context.lineWidth = 5;

    for (var i = 0; i < clickX.length; i++)
    {   
        context.beginPath ();

        if (clickDrag[i] && i)
        {
            context.moveTo (clickX[i-1], clickY[i-1]);
        }
        else
        {
            context.moveTo (clickX[i]-1, clickY[i]);
        }

        context.lineTo (clickX[i], clickY[i]);
        context.closePath ();
        context.stroke ();
    }
}

非常感谢帮助！不确定如何解决这个问题。