<canvas id="canvas" width="800" height="500"></canvas>
<script src="js/jquery-3.2.1.min.js"></script>

var canvas = document.getElementById('canvas'); // 得到畫布
var ctx = canvas.getContext('2d'); // 得到畫布的上下文物件
var flag = false;
var x = 0; // 滑鼠開始移動的位置X
var y = 0; // 滑鼠開始移動的位置Y
var url = ''; // canvas圖片的二進位制格式轉為dataURL格式
 


/* 為canvas繫結mouse事件 */
$('canvas').mousedown(function(e){
    flag = true;
    x = e.offsetX; // 滑鼠落下時的X
    y = e.offsetY; // 滑鼠落下時的Y
}).mouseup(function(e){
    flag = false;
    url = $('canvas')[0].toDataURL(); // 每次 mouseup 都儲存一次畫布狀態
}).mousemove(function(e){
    drawXxx(e); // 繪製方法
});

1、畫筆工具

function
 
 drawPencil(e){
    if(flag){
        ctx.lineTo(e.offsetX,e.offsetY);
        ctx.stroke(); // 呼叫繪製方法 
    }else{
        ctx.beginPath();
        ctx.moveTo(x,y);
    }
}

2、畫矩形

function drawRect(e){
    if(flag){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.strokeRect
 
(x,y,e.offsetX-x,e.offsetY-y);
    }
}

3、畫直線

function drawLine(e){
    if(flag){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(e.offsetX,e.offsetY);
        ctx.stroke();   
    }
}

4、畫圓circle

function drawCircle(e){
    if(flag){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        var rx = (e.offsetX-x)/2;
        var ry = (e.offsetY-y)/2;
        var r = Math.sqrt(rx*rx+ry*ry);
        ctx.arc(rx+x,ry+y,r,0,Math.PI*2); // 第5個引數預設是false-順時針
        ctx.stroke();
    }
}

但是這樣，畫布上只能同時有一個圖形，所以需要儲存畫布之前的狀態

function loadImage(){
    var img = new Image();
    img.src = url;
    ctx.drawImage(img,0,0,canvas.width,canvas.height);
}

將 loadImage() 在清空畫布後呼叫