canvasは簡易な画板を実現

htmlスタイル

JAvascriptコード

//   Input id
    var selector = document.getElementById("colorSelect");
    //  color 
    var color = null;
    //  color 
    selector.onchange = function(){
        color = this.value;
    }
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    //  
    canvas.onmousedown = function(e){
        //  canvas x y  
        var x = e.clientX - canvas.offsetLeft;
        var y = e.clientY - canvas.offsetTop;
        cxt.beginPath();
        cxt.moveTo(x,y);
        canvas.onmousemove = function(e){
            var x = e.clientX - canvas.offsetLeft;
            var y = e.clientY - canvas.offsetTop;
            cxt.lineTo(x,y);
            cxt.strokeStyle=color;
            cxt.stroke();
        }
        //    move 
        canvas.onmouseup = function(){
            canvas.onmousemove = null;
        }
    }
    //  
    function qingkong(){
        cxt.clearRect(0,0,500,500);
        console.log(11);
    }