SOURCE

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

ctx.rect(10,10,c.width-20,c.height-20);
ctx.fillStyle="gray";
ctx.fill();

ctx.strokeStyle="red";
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

ctx.strokeStyle="blue";
ctx.beginPath();
ctx.rect(200,100,200,150);
ctx.stroke();


let oImgData = ctx.getImageData(190, 90, 220, 170);
let oCanvas = document.createElement("canvas");
oCanvas.width=220;
oCanvas.height=170;
let oCtx = oCanvas.getContext("2d");
oCtx.putImageData(oImgData, 0, 0);
let oGrayImg = new Image();
oGrayImg.src = oCanvas.toDataURL();

let divHint=document.createElement("div");
divHint.innerHTML="截取的矩形：";
document.body.appendChild(divHint);
document.body.appendChild(oGrayImg);

<canvas id="canvas" width="700" height="300"></canvas>

#canvas {
  background: #fff;
  border: 1px solid #ccc 
}