http://ry.url.tw/wp/doc/canvas/cv.htm

<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function()
{
    $('#myCanvas')
        .css(
        {
              position: 'absolute'
            , top: 100
            , left: 100
            , border: '1px solid black'
        }) ;
    var eleCv = $('#myCanvas').get(0) ;
    eleCv.width = 100 ;
    eleCv.height = 100 ;

    cvCont = eleCv.getContext("2d");
    //底色
    cvCont.fillStyle = 'red' ;
    cvCont.fillRect(0,0,50,50) ;
    cvCont.fillStyle = 'orange' ;
    cvCont.fillRect(50,0,100,50) ;
    cvCont.fillStyle = 'yellow' ;
    cvCont.fillRect(0,50,50,100) ;
    cvCont.fillStyle = 'green' ;
    cvCont.fillRect(50,50,100,100) ;
    
    //畫線
    cvCont.strokeStyle = '#00ff00' ;
    cvCont.lineWidth = 5 ;
    cvCont.lineJoin='bevel';  //bevel round miter
    cvCont.beginPath() ;
    cvCont.moveTo(50, 0) ;
    cvCont.lineTo(25, 50) ;
    cvCont.lineTo(75, 50) ;
    cvCont.lineTo(50, 100) ;
    cvCont.stroke() ;
    cvCont.closePath() ;
    
    //save & restore
    cvCont.beginPath() ;
    cvCont.strokeStyle = 'gold' ;
    cvCont.save() ;  //記住原本的筆的顏色是金色
    
    cvCont.strokeStyle = 'red' ;
    cvCont.moveTo(25, 0) ;
    cvCont.lineTo(100, 75) ;
    cvCont.stroke() ;
    cvCont.closePath() ;
    
    cvCont.restore() ;  //還原筆的顏色
    
    cvCont.beginPath() ;
    cvCont.moveTo(0, 25) ;
    cvCont.lineTo(75, 100) ;
    cvCont.stroke() ;   
    cvCont.closePath() ;
    
    //round
    cvCont.strokeStyle = 'pink' ;
    cvCont.beginPath(); // Start the path
    cvCont.arc(50,50,30,0,1*Math.PI);
    cvCont.stroke() ;
    cvCont.closePath(); // Close the path
   
}) ;
</script>

<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>