9patch.html

<canvas id="canvas" width="500" height="500"></canvas>

<script>

    Object.assign(new Image(), {
        src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAADdJREFUCJlVzLENwCAMAMEjosL7D+DNzCRORUS+Pv3o7nYVESZUFchM8Byx9/70vMVprLV+T3gB2s0OUOHHM2YAAAAASUVORK5CYII=',
        onload: function () {
            var ctx = canvas.getContext('2d')
            ctx.fillStyle = '#a0a0a0'
            ctx.fillRect(0, 0, canvas.width, canvas.height)
            ctx.scale(10, 10)
            ctx.imageSmoothingEnabled = false
            draw9patch(ctx, this, 2, 2, 2, 2, 20, 20, 20, 20)
        }
    })

    function draw9patch (
        ctx,
        image,
        left, top, right, bottom,
        x, y, width, height
    ) {
        ctx.drawImage(
            image,
            0, 0, left, top,
            x, y, left, top
        )
        ctx.drawImage(
            image,
            left, 0, image.width - left - right, top,
            x + left, y, width - left - right, top
        )
        ctx.drawImage(
            image,
            image.width - right, 0, right, top,
            x + width - right, y, right, top
        )
        ctx.drawImage(
            image,
            image.width - right, top, right, image.height - top - bottom,
            x + width - right, y + top, right, height - top - bottom
        )
        ctx.drawImage(
            image,
            image.width - right, image.height - bottom, right, bottom,
            x + width - right, y + height - bottom, right, bottom
        )
        ctx.drawImage(
            image,
            left, image.height - bottom, image.width - left - right, bottom,
            x + left, y + height - bottom, width - left - right, bottom
        )
        ctx.drawImage(
            image,
            0, image.height - bottom, left, bottom,
            x, y + height - bottom, left, bottom
        )
        ctx.drawImage(
            image,
            0, top, left, image.height - top - bottom,
            x, y + top, left, height - top - bottom
        )
        ctx.drawImage(
            image,
            left, top, image.width - left - right, image.height - top - bottom,
            x + left, y + top, width - left - right, height - top - bottom
        )
    }

</script>