无法使用选定的颜色进行绘制

描述:我在我的页面上有一个画布绘图，这里是编码。我想让用户选择颜色和绘制。我已经有颜色选择了。

问题:无法使用选定的颜色绘制。我没能算出这个函数。请帮助。

注。通过单击按钮，画布将弹出。

Demo: jsfiddle

<button onClick="openPopup();">click here</button>
    <div id="test" class="popup">
     <div></div>
        <div class="cancel" onclick="closePopup();"></div>
        <canvas id="canvas1" width="750" height="720" style="border: 1px solid black">
        </canvas>
      <p>&nbsp;</p>
    <p>
      <input type="button" id="Orange" style="background-color: orange; width: 25px;
    height: 25px;"/>
    <input type="button" id="Yellow" style="background-color: yellow; width: 25px;
    height: 25px;"/>
    <input type="button" id="Green" style="background-color: green; width: 25px;
    height: 25px;"/>
    <input type="button" id="Blue" style="background-color: blue; width: 25px;
    height: 25px;"/>
    <input type="button" id="Purple" style="background-color: purple; width: 25px;
    height: 25px;"/>
    <input type="button" id="Brown" style="background-color: brown; width: 25px;
    height: 25px;"/>
    <input type="button" id="Black" style="background-color: black; width: 25px;
    height: 25px;"/>
    <input type="button" id="White" style="background-color: white; width: 25px;
    height: 25px;"/>
    </p>
    <p><input type="button" id="reset_image" value="Reset Drawing"/></p>
    </div>
    <style>
    #canvas1 {
        left:0;  /* adjust as needed */
        top:0;
    }
    .popup{
        position:absolute;
        top:0px;
        left:0px;
        margin:0px;
        width: 900px;
        height: 750px;
        font-family:verdana;
        font-size:13px;
        background-color:white;
        border:2px solid grey;
        z-index:100000000000000000;
        display:none;
        opacity:0.6;
        filter:alpha(opacity=60);
        margin-left: 300px;
        margin-top: 90px; 
        overflow: auto; 
        }
    .cancel{
        display:relative;
        cursor:pointer;
        margin:0;
        float:right;
        height:10px;
        width:14px;
        padding:0 0 5px 0;
        background-color:red;
        text-align:center;
        font-weight:bold;
        font-size:11px;
        color:white;
        border-radius:3px;
        z-index:100000000000000000;
        }
    .cancel:hover{
        background:rgb(255,50,50);
        }
    </style>
    <script>
    function openPopup() {
        var p = document.getElementById('test');
        p.style.display = 'block';
        canvas.width  = parseInt(p.style.width, '10'); //only when you use pixels
        canvas.height = parseInt(p.style.height, '10');
    }
    function closePopup() {
        document.getElementById('test').style.display = 'none';
    }
    var can = document.getElementById('canvas1');
    var ctx = can.getContext('2d');
    var isPressed = false;
    var mx = 4, my = 4;
    function move(e) {
      getMouse(e);
      if (isPressed) {
        ctx.lineTo(mx, my);
        ctx.stroke()
      }
    }
    function up(e) {
      getMouse(e);
      isPressed = false;
    }
    function down(e) {
      getMouse(e);
      ctx.beginPath();
      ctx.moveTo(mx, my);
      isPressed = true;
    }
    can.onmousemove = move;
    can.onmousedown = down;
    can.onmouseup = up;
    // way oversimplified:
    function getMouse(e) {
        var element = can, offsetX = 0, offsetY = 0;
        mx = e.pageX - 305;
        my = e.pageY - 95;
    }  
    </script>