问在HTML canvas/Javascript上捕获用户输入，反之亦然

EN

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var rect = {};
//var drag = false;

    function getarea() 
     {      
            var wid = document.getElementById("wid").value;
            var hgt = document.getElementById("hgt").value;
            var area = wid * hgt;
            var perim = wid * 2 + hgt * 2;

             if (wid =="") {
                    document.getElementById("errors").innerHTML = "The value for the width is blank.";
                    document.getElementById('wid').focus();
             }

             else if (hgt == "") {
                    document.getElementById("errors").innerHTML = "The value for the height is blank.";
                    document.getElementById("hgt").focus();
             }

            else if (isNaN (wid)) {
                    document.getElementById("errors").innerHTML = "Please enter a numeric value for the width.";
                    document.getElementById('wid').focus();
            }

            else if (isNaN (hgt)) {
                    document.getElementById("errors").innerHTML = "Please enter a numeric value for the height.";
                    document.getElementById("hgt").focus();
            }

            else if (wid <= 0) {
                    document.getElementById("errors").innerHTML = "The width is less than or equal to zero.";
                    document.getElementById('wid').focus();
            }

            else if (hgt <= 0) {
                    document.getElementById("errors").innerHTML = "The height is less than or equal to zero.";
                    document.getElementById("hgt").focus();
            }

            else if (wid > 500) {
                    document.getElementById("errors").innerHTML = "The width is greater than 500.";
                    document.getElementById('wid').focus();
            }

            else if (hgt > 500) {
                    document.getElementById("errors").innerHTML = "The height is greater than 500.";
                    document.getElementById("hgt").focus();
            }

            else {
                window.document.getElementById("area").innerHTML = area;
                window.document.getElementById("perim").innerHTML = perim;
                document.getElementById("errors").innerHTML = "Please see results listed above.";
           }

    }



    function updateform (){
        "use strict"
        var wid = document.getElementById("wid").value;
        var hgt = document.getElementById("hgt").value;
        var area = wid * hgt;

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2D");
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillRect(0,0, rect.wid, rect.hgt);
        context.fillStyle = "#FF0000"; //red color
        draw();
    }

    function mouseDown(e) 
    {
      rect.startX = e.pageX - this.offsetLeft;
      rect.startY = e.pageY - this.offsetTop;
      canvas.style.cursor="crosshair";
      drag = true;
    }

    function mouseUp () {
        drag = false;
    }

    function mouseMove(e) {
      if (drag) {
        rect.wid = (e.pageX - this.offsetLeft) - rect.startX;
        rect.hgt = (e.pageY - this.offsetTop) - rect.startY ;
        context.clearRect(0,0,canvas.width,canvas.height);
        draw();
      }
    }

    function init() {
        canvas.addEventListener("mousedown", mouseDown, false);
        canvas.addEventListener("mouseup", mouseUp, false);
        canvas.addEventListener("mousemove", mouseMove, false);
    }

    init();

    function drawform() {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2D");
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillRect(0,0, rect.wid, rect.hgt);
        context.fillStyle = "#FF0000"; //red color

    }

    function draw (){
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillRect(rect.startX, rect.startY, rect.wid, rect.hgt);
        context.fillStyle = "#378E37"; //green color    
    }

    draw();