fabric.jsのcanvasで、モバイル画面のビューが崩れる問題を解消したい

Web上のフォーム画面を作成しています。

jQueryにて画面の表示・非表示を繰り返して画面遷移（を行っているかのように見せている）プログラムを作成しておりまして、署名用としてfabric.jsのcanvasを用いています。

画面の表示・非表示はできているのですが、canvasがモバイル画面になったときに、ビューが崩れてしまい、HTML・CSS・Javascriptのコードを修正しておりますが、うまく反映されないため、困っています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1.0">
6  <title>フォーム</title>
7  <link rel="stylesheet" href="css/style.css">
8  <link type="text/css" href="lib/css/jquery.select2.min.css" rel="stylesheet">
9  <link type="text/css" href="lib/css/jquery-ui.css" rel="stylesheet">
10  <script type="text/javascript" src="js/jquery.min.js"></script>
11  <script type="text/javascript" src="lib/js/jquery-ui.min.js"></script>
12  
13  <script type="text/javascript" src="js/fabric.js"></script>
14  <script type="text/javascript" src="js/jquery.cookie.js"></script>
15</head>
16<script>
17  //即時処理
18  $(function() {
19    var canvas = new fabric.Canvas("canvas");
20    
21    //幅・高さの設定
22    var w = $(".sign #draw").width();
23    var h = $(".sign #draw").height();
24    canvas.setWidth(w);
25    canvas.setHeight(h);
26    
27    // 描画モード、線の太さ
28    canvas.isDrawingMode = true;
29    canvas.freeDrawingBrush.width = 5;
30
31    // 書き直しボタンで署名をクリア
32    $(document).on("click", "#undo", function(e) {
33      e.preventDefault();
34      canvas.clear();
35    });
36
37    // 画面切り替え処理
38    
39    /* 中略 */
40
41    // 署名画面（前へ）
42    $(document).on("click", ".sign .prev", function(e) {
43        $(".sign").hide();
44        $("前の画面のclass名").slideToggle();
45    });
46
47    // 署名画面（次へ）
48    $(document).on("click", ".sign .next", function(e) {
49        $(".sign").hide();
50        $("次の画面のclass名").slideToggle();
51    });
52    
53    /* 以降、ロジック的な処理のため、省略 */
54  });
55</script>
56
57<body>
58    <form id="form_data" class="web_form">
59      <h2>入力画面</h2>
60
61      <!-- 署名画面より前の画面を記述する部分（省略） -->
62
63      <!-- 署名画面 -->
64      <div class="sign">
65        <div class="msg">XX様　以下の欄にご署名をお願い致します。</div>
66        <div id="draw">
67          <canvas id="canvas" name="canvas"></canvas><br/>
68          <div id="draw_undo"><button id="undo">書きなおす</button></div>
69        </div>
70        <div class="switch_btn">
71          <button class="prev">前へ</button>
72          <button class="next">次へ</button>
73        </div>
74      </div>
75      
76      <!-- 署名画面より後の画面を記述する部分（省略） -->
77      
78    </form>
79</body>

CSS
1/* フォーム全体 */
2.web_form {
3    /* サイズ */
4    min-width: 100px;
5    max-width: 800px;
6
7    margin-left: auto;
8    margin-right: auto;
9
10    /*背景グラデーションの指定*/
11    background:#d3d3d3;
12    background: -webkit-linear-gradient(top, #fbfcfc, #f0f8f1);
13    background: linear-gradient(#fbfcfc, #f0f8f1);
14}
15
16/* 中略 */
17
18/* 署名部分 */
19.sign {
20    padding: 20px 100px 20px 100px;
21}
22
23.sign #draw {
24    width: 100%;
25    height: 250px;
26}
27.sign #draw canvas {
28    border: 3px solid #000;
29}
30
31.sign #draw button {
32    margin-right: 10%;
33}
34
35/* ボタン配置 */
36.switch_btn {
37    text-align: center;
38    padding: 20px 0;
39}
40
41/* 送信ボタン */
42.send_btn {
43    text-align: center;
44    padding-top: 40px;
45}
46
47
48/* 以下、モバイル画面 */
49@media screen and (max-width: 740px) {
50
51body {
52    background-color: #eedddd;
53    color: #000000;
54
55    width: 90%;
56}
57
58/* フォーム全体 */
59.web_form .msg {
60  padding: 0;
61}
62
63/* 改行 */
64.sp { display: block; }
65
66/* 署名部分（SP） */
67.sign {
68    width: 90%;
69    padding: 20px 0 20px 20px;
70}
71
72.sign #draw {
73    width: 100%;
74    height: 100%;
75    text-align: center;
76}
77
78.sign #draw #undo {
79    margin-right: 10%;
80}