我可以做什么来使两个图中的点颜色半透明重叠？

// 创建画布和绘图上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 定义两个图形的点坐标数组
var points1 = [
  { x: 50, y: 50 },
  { x: 100, y: 100 },
  { x: 150, y: 50 },
];

var points2 = [
  { x: 100, y: 50 },
  { x: 150, y: 100 },
  { x: 200, y: 50 },
];

// 设置点的半透明颜色
var color1 = "rgba(255, 0, 0, 0.5)";
var color2 = "rgba(0, 0, 255, 0.5)";

// 绘制第一个图形
ctx.fillStyle = color1;
points1.forEach(function(point) {
  ctx.beginPath();
  ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
});

// 绘制第二个图形
ctx.fillStyle = color2;
points2.forEach(function(point) {
  ctx.beginPath();
  ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
});