canvas & canvas drawing lines to achieve WordPad function

canvas painting V

var Canvas document.querySelector = ( "Canvas" );
         var ctx = canvas.getContext ( "2D" ); 
        ctx.strokeStyle = "Red" ;
         // line thickness 
        ctx.lineWidth = 10 ;
         // ends of the wire loop 
        ctx = .lineCap "round" ;
         // line inflection arcing 
        ctx.lineJoin = "round" ; 
        ctx.beginPath (); 
        // tip moves to a position 
        ctx.moveTo (50,50 );
         // scribe 
        ctx.lineTo ( 100, 100 ); 
        ctx.lineTo ( 150,50 );
         //The tip is moved to a position 
        ctx.moveTo (200, 50 ); 
        ctx.lineTo ( 250,100 ); 
        ctx.lineTo ( 300, 50 );
         // show, filling stroke 
        ctx.stroke ();
     </ Script>

canvas WordPad

var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "red";
        //线粗细
        ctx.lineWidth = 10;
        //线两端弧化
        ctx.lineCap = "round";
        //线拐点弧化
        ctx.lineJoin = "round";
        document.addEventListener("mousedown", mouseHandler);
        function mouseHandler(e) {
            switch (e.type) {
                case 'mousedown':
                    //起始绘制位置
                    ctx.moveTo(e.clientX, e.clientY);
                    document.addEventListener("mousemove", mouseHandler);
                    document.addEventListener("mouseup", mouseHandler);
                    break;
                case 'mousemove':
                    ctx.lineTo(e.clientX, e.clientY);
                    ctx.stroke();//画出来
                    break;
                case 'mouseup':
                    document.removeEventListener("mousemove", mouseHandler);
                    document.removeEventListener("mouseup", mouseHandler);
                    break;
            }
        }

 

 

 effect: