canvas 이미지 사이즈 질문 채택완료

</p>

<p>        <tr>

            <th scope="row"><label for="wr_2">서명날인<strong class="sound_only">필수</strong></label></th>

            <td><p>* 서명확인 필수.</p>

                    <?php if($write['wr_2']) { ?>

                        
<img src="<?php echo $write['wr_2'] ?>">

                    <?php } ?>

                        <input type="hidden" name="wr_2" value="<?php echo $write['wr_2'] ?>" class="form-control input-sm">

                        <div id="wr_2"></div>                    </p>

<p>                    <style type="text/css">

                        #div_signcontract{ width: 100px; }

                        .popupHeader{ margin: 10px; }

                    </style>

                    <script type="text/javascript">

                        var isSign = false;

                        var leftMButtonDown = false;

                        

                        jQuery(function(){

                            //Initialize sign pad

                            init_Sign_Canvas();

                        });

                        

                        function fun_submit() {

                            if(isSign) {

                                var canvas = $("#canvas").get(0);

                                var imgData = canvas.toDataURL();

                                jQuery('#page').find('p').remove();

                                jQuery('#page').find('img').remove();

                                jQuery('#page').append(jQuery('<p>아래의 서명날인은 사용합니다.</p>'));

                                jQuery('#wr_2').append($('<input type="hidden" name="wr_2" class="form-control input-sm">').attr('value',imgData));

                                

                                closePopUp();

                            } else {

                                alert('Please sign');

                            }

                        }

                        

                        function closePopUp() {

                            jQuery('#divPopUpSignContract').popup('close');

                            jQuery('#divPopUpSignContract').popup('close');

                        }

                        

                        function init_Sign_Canvas() {

                            isSign = false;

                            leftMButtonDown = false;

                            

                            //Set Canvas width

                            var sizedWindowWidth = $(window).width();

                            if(sizedWindowWidth > 700)

                                sizedWindowWidth = $(window).width() / 2;

                            else if(sizedWindowWidth > 400)

                                sizedWindowWidth = sizedWindowWidth - 100;

                            else

                                sizedWindowWidth = sizedWindowWidth - 50;

                             

                             //$("#canvas").width(sizedWindowWidth);

                             $("#canvas").width(100);

                             $("#canvas").height(40);

                             $("#canvas").css("border","1px solid #000");

                            

                             var canvas = $("#canvas").get(0);

                            

                             canvasContext = canvas.getContext('2d');</p>

<p>                             if(canvasContext)

                             {

                                 //canvasContext.canvas.width  = sizedWindowWidth;

                                 canvasContext.canvas.width  = 100;

                                 canvasContext.canvas.height = 40;</p>

<p>                                 canvasContext.fillStyle = "#fff";

                                 canvasContext.fillRect(0,0,sizedWindowWidth,200);

                                 

                                 canvasContext.moveTo(50,150);

                                 canvasContext.lineTo(sizedWindowWidth-50,150);

                                 canvasContext.stroke();

                                

                                 canvasContext.fillStyle = "#000";

                                 canvasContext.font="20px Arial";

                                 canvasContext.fillText("x",40,155);

                             }

                             // Bind Mouse events

                             $(canvas).on('mousedown', function (e) {

                                 if(e.which === 1) { 

                                     leftMButtonDown = true;

                                     canvasContext.fillStyle = "#000";

                                     var x = e.pageX - $(e.target).offset().left;

                                     var y = e.pageY - $(e.target).offset().top;

                                     canvasContext.moveTo(x, y);

                                 }

                                 e.preventDefault();

                                 return false;

                             });

                            

                             $(canvas).on('mouseup', function (e) {

                                 if(leftMButtonDown && e.which === 1) {

                                     leftMButtonDown = false;

                                     isSign = true;

                                 }

                                 e.preventDefault();

                                 return false;

                             });

                            

                             // draw a line from the last point to this one

                             $(canvas).on('mousemove', function (e) {

                                 if(leftMButtonDown == true) {

                                     canvasContext.fillStyle = "#000";

                                     var x = e.pageX - $(e.target).offset().left;

                                     var y = e.pageY - $(e.target).offset().top;

                                     canvasContext.lineTo(x,y);

                                     canvasContext.stroke();

                                 }

                                 e.preventDefault();

                                 return false;

                             });

                             

                             //bind touch events

                             $(canvas).on('touchstart', function (e) {

                                leftMButtonDown = true;

                                canvasContext.fillStyle = "#000";

                                var t = e.originalEvent.touches[0];

                                var x = t.pageX - $(e.target).offset().left;

                                var y = t.pageY - $(e.target).offset().top;

                                canvasContext.moveTo(x, y);

                                

                                e.preventDefault();

                                return false;

                             });

                             

                             $(canvas).on('touchmove', function (e) {

                                canvasContext.fillStyle = "#000";

                                var t = e.originalEvent.touches[0];

                                var x = t.pageX - $(e.target).offset().left;

                                var y = t.pageY - $(e.target).offset().top;

                                canvasContext.lineTo(x,y);

                                canvasContext.stroke();

                                

                                e.preventDefault();

                                return false;

                             });

                             

                             $(canvas).on('touchend', function (e) {

                                if(leftMButtonDown) {

                                    leftMButtonDown = false;

                                    isSign = true;

                                }

                             

                             });

                        }

                    </script></p>

<p>                    <div data-role="page">

                        <div id="page" data-role="content">

                        </div>    

                        <div data-role="popup" id="divPopUpSignContract">

                            <div class="ui-content popUpHeight">

                                <div id="div_signcontract">

                                    <canvas id="canvas">Canvas is not supported</canvas>

                                    <div>

                                        <input id="btnSubmitSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="서명확인" onclick="fun_submit()" />

                                        <input id="btnClearSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" />

                                    </div>

                                </div>    

                            </div>

                        </div>

                    </div>            

            </td>

        </tr>

</li></p>

<p>