Html5 canvas 围绕（和内部）复杂HTML画布形状进行笔划？

我有一些代码，它采用一组颜色，并根据数据在画布上创建一个矩形网格：

Html:

结果：

现在我需要找到一种方法来在整个形状周围创建一个笔划，以及在内部的任何“岛”块，以将它与空白区域分开（它不会将红色与蓝色分开，只是将外部边界分开）。所以看起来是这样的：

然而，我找不到任何可行的方法来做到这一点。一些方法建议创建笔划，将合成更改为

context.globalCompositeOperation=“destination out”

然后添加填充，这将“合并”任何重叠的片段，但这些片段实际上并不重叠，它们只是接触而已。其他解决方案建议只使用stoke

ctx.moveTo（）

沿着完整形状的边缘进行跟踪，然后应用笔划，但是由于我使用fillRect（）填充数据，所以我没有坐标来跟踪它

---

还有什么方法可以得到我需要的笔划吗？

假设它的内侧边缘，以下是一些解决方案

最简单的方法是通过检查每个单元的4条边并在边上有相邻单元时绘制边界来渲染边界

如果只有1个像素 下一个示例在一次过程中添加边框和单元格颜色，绘制两次，第二次（右）仅绘制一个像素边框

const ctx=canvas.getContext（“2d”）；
常量单元格=
“AAA B”+
“A B”+
“AAA B”+
“AA BB”+
“ABB B”+
“AABBB”；
常数cols={
A:“F00”，
B:“00F”，
};
常数cols1={
答：“#FDD”，
B:“DDF”，
};
恒定步幅=5；
常量大小=canvas.height/（cells.length/步幅| 0）；
const borderCol=“#000”；
函数单元格（x、y、边框、cols、单元格）{
var i=0；
setTransform（1,0,0,1,x，y）；
while（i
您应该寻找一种“非画布”解决方案来解决此问题，忘记globalComposite，自己动手做。。。试过后再发回来something@HelderSepulveda我不知道您所说的非画布解决方案是什么意思，比如使用非内置方法还是将画布全部放在一起？我正在使用画布作为我的项目的基础，该项目在引擎盖下使用画布，因此解决方案要么需要是画布解决方案，要么整个项目需要返工。我尝试了一些方法（globalComposite和使用硬编码坐标跟踪形状），但由于所述原因，这些方法不起作用。我可以接受“这不可能”作为答案，但我没有其他想法可以尝试。当然可能，只要在适用时自己画边界线就行了
<canvas id="canvas" width="100" height="100">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

var my_canvas = document.getElementById('canvas'),
  context = my_canvas.getContext("2d");

const cellSize = 20;
const arr = ['#FF0000', '#FF0000', null, null, '#0000FF',
  '#FF0000', '#FF0000', '#FF0000', null, '#0000FF',
  '#FF0000', null, '#FF0000', null, '#0000FF',
  '#FF0000', '#FF0000', '#FF0000', null, '#0000FF',
  '#FF0000', '#FF0000', '#0000FF', '#0000FF', '#0000FF'
]

let col = 0;
let row = 0;
arr.forEach((item) => {
  if (item) {
    context.fillStyle = item;
    context.fillRect(
      col * cellSize,
      row * cellSize,
      cellSize,
      cellSize
    );
  }
  if (col === 4) {
    col = 0;
    row += 1;
  } else {
    col += 1;
  }
});