How to remove blur on scaling for context2d drawings

[chrispytoes]

My game involves lots of geometric shapes and polygons, so I would prefer to be able to draw most of my graphics using drawing code rather than sprite assets. My issue is that when I try drawing my own custom shapes, the edges get blurry when scaling the outer container to zoom in and out, but the built-in shapes like cirlce render perfectly smooth at any scale.

This is how the blurry triangle is rendered:

image(NativeImageOrBitmap32(64, 64).context2d {
    stroke(Colors.BLACK) {
        fill(Colors.BLUE) {
            moveTo(0.0, 0.0)
            lineTo(64.0, 32.0)
            lineTo(0.0, 64.0)
            lineTo(0.0, 0.0)
            close()
        }
    }
}).anchor(Anchor.CENTER)

This is how the circles are rendered:

circle {
    radius = r.toDouble()
    fill = Colors.DARKGRAY
}.anchor(Anchor.CENTER)

How can I render that triangle so it's not blurry when scaling?

[soywiz]

Try to use graphics { } and specify render to use GPU

[chrispytoes]

Try to use graphics { } and specify render to use GPU

@soywiz Ah, well I really overcomplicated that thanks, I think I saw the bitmap method somewhere in a sample.

graphics {
    stroke(Colors.BLACK) {
        fill(Colors.BLUE) {
            moveTo(0.0, 0.0)
            lineTo(64.0, 32.0)
            lineTo(0.0, 64.0)
            lineTo(0.0, 0.0)
            close()
        }
    }
}.anchor(Anchor.CENTER)

This works!

[soywiz]

Glad it worked! Moved to discussion as Q&A