在HTML5中使用3种不同形状绘制画布

Question

任何人都可以协助我完成一个小项目，这是一个令人头痛的问题。 我正在使用生活图草图构建在线音频克。这是我的java脚本fcr的绘制。这个代码工作得很好，并且可以用从eedge到另一个的一条线来绘制，我需要再添加一个线条画，使其成为三个。

    var leftp = [];
    var rightp = [];
    var updownp = [];
    var saved = []; //saved graphs
    var backgroundpic = 'images/plotdomii.png';

    $(document).ready( function() {     

        function drawPoint( isLeft, x, y, prevx, prevy )
        {   
            var ctx = document.getElementById('earcanvas').getContext('2d');                
            ctx.beginPath();

            if ( isLeft )
            {

                ctx.strokeStyle = "green";
                    ctx.beginPath();
                ctx.moveTo(x+4,y+4);
                ctx.lineTo(x-4,y-4);
                ctx.lineTo(x+4,y-4);
                ctx.lineTo(x-4,y+4);
                ctx.fill();



            }
            else
            {
                ctx.strokeStyle = "red";
                ctx.arc( x, y, 5, 0, Math.PI*2, true);                  
            }

            if ( prevx > 0 )
            {
                    ctx.moveTo( prevx, prevy );
                ctx.lineTo( x, y );                 
            }               

            ctx.closePath(); 
            ctx.stroke();               
        }

        function onMouseDown( evt ) {
            if ( evt.which == 1 ) //left button
            {
                var isLeft = $("#left").hasClass("on");
                var l = 0;
                var cxy = $("#earcanvas").offset();
                if ( isLeft )
                {
                    l = leftp.push( [evt.pageX - cxy.left, evt.pageY - cxy.top] );
                    var prevx = l > 1 ? leftp[l-2][0] : 0;
                    var prevy = l > 1 ? leftp[l-2][1] : 0;
                    drawPoint( true, leftp[l-1][0], leftp[l-1][1], prevx, prevy );
                }
                else
                {
                    l = rightp.push( [evt.pageX - cxy.left, evt.pageY - cxy.top] );                 
                    var prevx = l > 1 ? rightp[l-2][0] : 0;
                    var prevy = l > 1 ? rightp[l-2][1] : 0;
                    drawPoint( false, rightp[l-1][0], rightp[l-1][1], prevx, prevy );                       

                }

            }

        }
        $("#earcanvas").mousedown( onMouseDown );
        function refreshCanvas()
        {
            leftp = [];
            rightp = [];
            var ctx = document.getElementById('earcanvas').getContext('2d');
            var img = new Image();
            img.src = backgroundpic;    
            img.onload = function(){
                ctx.drawImage(img,0,0);
            }
        }

        $("#left, #right").click( function() {
            $("#left, #right").removeClass("on").addClass("off");
            $(this).addClass("on").removeClass("off");              
        }
        );