H5制作面板

      canvas{
        position: absolute;
        left: 10px;
        top: 0;
    }

注意点：canvas制作宽高时只能写行间样式

<canvas id="myCanvas" width="800" height="500" style="background-color: #ccc;"></canvas>    

---

<script>
    var myCanvas = document.getElementById('myCanvas');
    var cv = myCanvas.getContext('2d');
    cv.strokeStyle = 'yellow';
    cv.lineWidth = 5;

    myCanvas.onmousedown = function(event){
    // 获取当前屏幕宽高
        var e = window.event || event;
        var x = e.offsetX;
        var y = e.offsetY;
       // console.log(x,y);
        // 开启路径
        cv.beginPath();
        // 设置起点
        cv.moveTo(x,y);
        myCanvas.onmousemove = function(){
            var e = window.event || event;
            var newX = e.offsetX;
            var newY = e.offsetY;
            cv.lineTo(newX,newY);
            cv.stroke();
        }
    }
    myCanvas.onmouseup = function() {
    // 当鼠标抬起时设置事件停止
         myCanvas.onmousemove = null;
    }
</script>

---