Пишите мышкой на холсте, расположенном в модальном

Question

Как уже упоминалось ранее, я пытаюсь писать на холсте с помощью мыши.«Специальная» тема заключается в том, что холст находится в модальном режиме.

Это код, который я использую:

<div id="modalIntroCarta" class="modal">

    <!-- Modal content -->

    <div class="modal-content">

        <div class="modal-header">
            <span id="cerrarModalIntroCar" class="close pull-right">&times;</span>
            <h4>Introduce los datos necesarios para la firma de la carta de nombramiento</h4>
        </div>

        <div class="modal-body">

            <div id="colUno" class="col-xs-6">

                <div id="divNomFir" class="form-group col-xs-12">

                    <label for="nomFir" class="control-label col-xs-5">Nombre del firmante:</label>

                    <div class="col-xs-7">
                        <input type='text' name='nomFir' maxlength='50' id='nomFir' class='form-control input-sm'>
                        <p id="hnf" class="help-block">Introduce un nombre válido</p>
                    </div>

                </div>

                <div id="divApeFir" class="form-group col-xs-12">
                    <label for="apeFir" class="control-label col-xs-5">Apellido(s) del firmante:</label>

                    <div class="col-xs-7">
                        <input type='text' name='apeFir' maxlength='100' id='apeFir' class='form-control input-sm'>
                        <p id="haf" class="help-block">Introduce apellido(s) válido</p>
                    </div>

                </div>

                <div id="divPstFir" class="form-group col-xs-12">
                    <label for="pstFir" class="control-label col-xs-5">Cargo del firmante:</label>

                    <div class="col-xs-7">
                        <input type='text' name='pstFir' maxlength='100' id='pstFir' class='form-control input-sm'>
                        <p id="hpf" class="help-block">Introduce un cargo válido válido</p>
                    </div>

                </div>

            </div>

            <div id="colDos" class="col-xs-6">

                <div class="row">
                    <p class="pull-left">Firma en el siguiente recuadro</p>
                    <button type="button" id="borrarFir" class="btn btn-danger btn-sm pull-right">Borrar firma</button>
                </div>
                <canvas id="canFir" width="320" height="150" onmousemove="pintarLinea(event);" onmousedown="cambiarEstado();" onmouseup="cambiarEstado();">
                </canvas>

                <script type="text/javascript">

                    var miLienzo=document.getElementById("canFir"); // el canvas
                    var contexto= miLienzo.getContext("2d"); // el contexto
                    var canvasLimites=miLienzo.getBoundingClientRect(); // los margenes del canvas

                    var flagPaint=false; // nos dice si pintar o no
                    var actualPos; // la posición actual donde hice click

                    function cambiarEstado(){
                        flagPaint=!flagPaint;
                        actualPos=obtenerCoordenadas(event);
                    }

                    function pintarLinea(event){

                        if(flagPaint){
                            var coordenadas=obtenerCoordenadas(event);
                            contexto.beginPath(); // comenzamos a dibujar
                            contexto.moveTo(actualPos.x, actualPos.y); // ubicamos el cursor en la posicion (10,10)
                            contexto.lineTo(coordenadas.x,coordenadas.y);
                            actualPos={
                                x:coordenadas.x,
                                y:coordenadas.y
                            };
                            contexto.strokeStyle = "#000"; // color de la linea
                            contexto.stroke(); // dibujamos la linea
                        }

                    }

                    function obtenerCoordenadas(event){
                        var posX;
                        var posY;

                        if (event.pageX || event.pageY) {
                            posX = event.pageX- canvasLimites.left;
                            posY = event.pageY- canvasLimites.top;
                        }else{
                            posX = event.clientX - canvasLimites.left;
                            posY = event.clientY - canvasLimites.top;
                        }

                        return {x:posX,
                            y:posY
                        };
                    }

                </script>

            </div>

        </div>

        <div class="modal-footer">

            <button type="button" id="verificarCarta" class="btn btn-primary pull-right">Verificar</button>
            <button type="button" id="cerrarModalIntroCart" class="btn btn-default pull-right">Cerrar</button>

            <button type="button" id="enviarCarta" class="btn btn-success btn-sm pull-left">No puedes firmar la carta? Envíasela alguien que sí pueda!</button>

        </div>

    </div>

</div>

Код, связанный с холстом, прекрасно работает, когда холстуже существует на главной странице, а не в модальном.Я пытался добавить прослушиватели событий после загрузки модала, но он тоже не работает.

Я также использую bootstrap и jQuery ... во всяком случае, я не думаю, что это важный момент ..... но кто знает ...

Есть идеи, почему я не могу рисовать на холсте, когда он находится в модале?

Заранее большое спасибо!

РЕДАКТИРОВАТЬ:

jsfiddle.net / Rafa_Vizcaino / r2dp9vaw / 4 /