//定義裁切區塊
                                cont.beginPath();
                                cont.rect(100, 100, 400, 80);
                                cont.clip();

                                //在裁切區塊內畫的才會有顯示效果
                                cont.beginPath();
                                cont.arc(200, 200, 100, 0, Math.PI * 2, false);
                                cont.closePath();
                                cont.strokeStyle = 'red';
                                cont.fillStyle = 'red';
                                cont.fill();
                                cont.stroke();
                        

預設後來畫的圖會疊在上方 , 故可透過 globalCompositeOperation 屬性來改變圖層順序 .

對圖形物件的旋轉、縮放、扭曲、平移等相關作業

                                            cont.fillStyle = 'green';
                                            cont.fillRect(0, 0, 30, 30);          //先劃一個位置 100, 100 的 綠色方塊

                                            cont.scale(2, 3);                     //水平放大2倍 , 垂直放大3倍

                                            cont.fillStyle = 'red';
                                            cont.fillRect(30, 0, 30, 30);         //在座標 (30, 0) 的地方劃出另一個小方塊
                                    

                                            cont.fillStyle = 'red';
                                            cont.fillRect(200, 200, 100, 100);          //在座標 (30, 0) 的地方劃出另一個小方塊
                                            
                                            cont.rotate(Math.PI / 4);                   //旋轉 canvas 後來所劃的圖形會受影響

                                            cont.fillStyle = 'green';
                                            cont.fillRect(300, 100, 200, 200);          //先劃一個位置 100, 100 的 綠色方塊
                                            
                                            cont.fillStyle = 'yellow';
                                            cont.fillRect(400, 100, 150, 150);          //先劃一個位置 100, 100 的 綠色方塊
                                    

                                            cont.fillStyle = 'green';
                                            cont.fillRect(0, 0, 150, 150);          //先劃一個位置 100, 100 的 綠色方塊

                                            cont.translate(0, 0);                   //座標歸零
                                            cont.translate(200, 200);               //(0, 0)座標移動至 200, 200

                                            cont.fillStyle = 'red';
                                            cont.fillRect(0, 0, 100, 100);          //在座標 (0, 0) 的地方劃出另一個小方塊