使用p5实现分屏视口玩家移动时的问题求助

我正在做一个p5.js项目，想做两个独立的分屏视口，分别以两个不同的玩家为中心展示画面。我用createGraphics()来实现这个功能，现在两个视口确实能渲染出来，但问题是它们并没有正确居中在对应的玩家身上——我试过用translate()来调整位置，但还是没法让视口跟着玩家的位置保持居中。

除此之外，玩家的渲染效果也不对：原本设定一个是白色填充+黑色描边，另一个是黑色填充+白色描边，但实际显示出来的效果和预期不一样。

备注：内容来源于stack exchange，提问作者CoderGuy