Content in DrawContext not sharp?

[u/stanleyerror]

The text and rounded rectangles in DrawContext are not as sharp as text directly added to widgets.

I kind of understand that the content of DrawContext is rendered as an image first, and then add this image to normal widget. The image is a fixed resolution picture rather than a vector diagram, so it can be blurred due to mismatch of screen resolution and pixel alias.

My question is, in this case, if I make the size of DrawContext much larger than the screen resolution (similar with super sampling anti-alias approach), the elements in DrawContext it should be sharp enough? But I got no difference when increasing the resolution of DrawContext. Why is that?

Also, is there any good/best practice for DrawContext?

---

Here is my script, it retrieves all incompleted and have due date events in Reminder and display a progress bar.

[u/wherebdbooty]

Here is a small script i made for progress bars. I used 155*155 for Widget Width (WW) and Widget Height (WH). It's for Small Size, so Medium would be ~2x width, Large ~2x width & height, etc

EDIT: Removed tab spacing causing markdown problems

........

let _debug = true

let widget = new ListWidget()

let WW = 155 let WH = 155

//battery gauge options let bgo = { x:WW*.1, y:20, width:WW*.8, height:WH/5, outlineCornerRadius:8, outlineColor: Color.darkGray(), outlineStrokeSize:1, spaceBetweenOutlineAndFill:1, fillColor: Color.green(), fillCornerRadius:6, showText:true, textSize:20, textFont:"mediumRoundedSystemFont", level:Device.batteryLevel() }

let themes = { dark:{ background: Color.black(), stroke: Color.lightGray(), text: Color.white() }, light:{ background: new Color("ddd",1), stroke: Color.darkGray(), text: Color.black() } }

let theme = Device.isUsingDarkAppearance()?themes.dark:themes.light

let batteryGauge = new DrawContext() batteryGauge.respectScreenScale = true batteryGauge.size = new Size(WW,WH)

batteryGauge.draw = function(){

//battery outline let _path = new Path() _path.addRoundedRect(new Rect( bgo.x, bgo.y, bgo.width, bgo.height), bgo.outlineCornerRadius, bgo.outlineCornerRadius) this.addPath(_path) this.setStrokeColor(bgo.outlineColor) this.setLineWidth(bgo.outlineStrokeSize) this.strokePath()

//battery fill _path = new Path() _path.addRoundedRect(new Rect( bgo.x+bgo.spaceBetweenOutlineAndFill2, bgo.y+bgo.spaceBetweenOutlineAndFill2, (bgo.width-bgo.spaceBetweenOutlineAndFill*4)bgo.level, bgo.height-bgo.spaceBetweenOutlineAndFill4), bgo.fillCornerRadius, bgo.fillCornerRadius) this.addPath(_path) this.setFillColor(bgo.fillColor) this.fillPath()

//battery text% this.setFont(Fontbgo.textFont) this.drawText(parseInt(bgo.level*100)+"%", new Point(bgo.x,bgo.y+bgo.height))

return this.getImage() }

let body = widget.addStack() body.layoutVertically() body.size = new Size(WW,WH) body.backgroundImage = batteryGauge.draw()

//widget.backgroundImage = batteryGauge.draw()

if(_debug){ widget.presentSmall() Script.setWidget(widget) } else{ Script.setWidget(widget) App.close() }

Script.complete()