I am using skia-canvas, it happens to be in a Remix application but I do not think Remix is relevant here.

With this code, the red rectangle (via fillRect) is not rendered, the green rectangle and blue arc are stroked but not filled

import { Canvas } from 'skia-canvas'

const createImage = () => {
    const size = 128

    const canvas = new Canvas(size, size)

    const ctx = canvas.getContext('2d')

    ctx.fillStyle = 'black'
    ctx.fillRect(0, 0, size, size)

    ctx.lineWidth = 2
    ctx.strokeStyle = 'white'

    ctx.fillStyle = 'red'
    ctx.fillRect(20, 20, 20, 20)

    ctx.fillStyle = 'green'
    ctx.beginPath()
    ctx.rect(88, 88, 20, 20)
    ctx.fill()
    ctx.stroke()

    ctx.fillStyle = 'blue'
    ctx.beginPath()
    ctx.arc(size / 2, size / 2, 30, 0, 2 * Math.PI)
    ctx.fill()
    ctx.stroke()

    return canvas.toBuffer('png', { quality: 1 })
}

If I render the red rectangle last (the fillRect), that rectangle now renders along with the green rectangle, but still no blue filled arc:

import { Canvas } from 'skia-canvas'

const createImage = () => {
    const size = 128

    const canvas = new Canvas(size, size)

    const ctx = canvas.getContext('2d')

    ctx.fillStyle = 'black'
    ctx.fillRect(0, 0, size, size)

    ctx.lineWidth = 2
    ctx.strokeStyle = 'white'

    ctx.fillStyle = 'green'
    ctx.beginPath()
    ctx.rect(88, 88, 20, 20)
    ctx.fill()
    ctx.stroke()

    ctx.fillStyle = 'blue'
    ctx.beginPath()
    ctx.arc(size / 2, size / 2, 30, 0, 2 * Math.PI)
    ctx.fill()
    ctx.stroke()

    ctx.fillStyle = 'red'
    ctx.fillRect(20, 20, 20, 20)

    return canvas.toBuffer('png', { quality: 1 })
}

If I add ctx.closePath() before each ctx.fill() call it makes no difference.

What am I missing?