SOURCE

console 命令行工具 X clear

                    
>
console
CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
  var min_size = Math.min(w, h);
  if (!r || r > min_size / 2) r = min_size / 2;
  // 开始绘制
  if (r === min_size / 2) {
    this.arc(x + r, y + r, r, 0, 2 * Math.PI);
  } else {
    this.beginPath();
    this.moveTo(x + r, y);
    this.arcTo(x + w, y, x + w, y + h, r);
    this.arcTo(x + w, y + h, x, y + h, r);
    this.arcTo(x, y + h, x, y, r);
    this.arcTo(x, y, x + w, y, r);
    this.stroke();
    this.closePath();
  }
  this.clip();
  return this;
}

var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var img = new Image();
var x = 10,
y = 10;
img.src = 'https://www.baidu.com/img/bd_logo1.png?where=super';
var pattern = context.createPattern(img, "no-repeat");
context.strokeStyle = 'rgba(0,0,0,0)';
//context.roundRect(x, y, img.width, img.height);
context.roundRect(x, y, 100, 100, 20);
context.drawImage(img, x, y, 100, 100);

context.globalAlpha = 0;
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;">
  您的浏览器不支持 HTML5 canvas 标签。
</canvas>