帮我生成一个canvas图片标注的代码 要求可以存储点的集合 并且可以绘制出矩形

好的，我可以为您生成一个canvas图片标注的代码，以下是示例代码：

// 创建canvas元素
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

// 获取canvas上下文
var ctx = canvas.getContext('2d');

// 绘制图片
var img = new Image();
img.src = 'your_image_url';
img.onload = function() {
  ctx.drawImage(img, , , canvas.width, canvas.height);
}

// 存储点的集合
var points = [];

// 监听鼠标点击事件
canvas.addEventListener('click', function(event) {
  var x = event.offsetX;
  var y = event.offsetY;
  points.push({x: x, y: y});
  drawRect(x, y);
});

// 绘制矩形
function drawRect(x, y) {
  ctx.beginPath();
  ctx.rect(x-10, y-10, 20, 20);
  ctx.strokeStyle = 'red';
  ctx.stroke();
}

// 存储点的集合
console.log(points);

这段代码可以创建一个canvas元素，并在其中绘制一张图片。当用户点击canvas时，会在点击位置绘制一个红色矩形，并将该点的坐标存储在points数组中。您可以根据需要修改矩形的大小和颜色。