Swift UI IOS, Generated Image from Canvas has a top margin - ios

Question

I'm trying to understand which is the problem in the code below.
The purpose is to generate an image from a canvas (real code is more complex), and I'm having this issue in the last step.
When generating image, code is always adding some space on top of generated image (see in red color). I was able to removed adding some padding, but in my real code has different value (here it's just 20, but it's 43 in my code)
The image shown it's 800x499 pixels
extension UIView {
func asImage() -> UIImage {
let format = UIGraphicsImageRendererFormat()
format.scale = 1
backgroundColor = .red
return UIGraphicsImageRenderer(size: self.layer.frame.size, format: format).image { context in
self.drawHierarchy(in: self.layer.bounds, afterScreenUpdates: true)
}
}
}
extension View {
func asImage(size: CGSize) -> UIImage {
let controller = UIHostingController(rootView: self)
controller.view.bounds = CGRect(origin: .zero, size: size)
let image = controller.view.asImage()
return image
}
}
struct TestView: View {
var body: some View {
VStack(spacing: 0.0) {
let canvass = Canvas {
context, size in
context.draw(Image ("empty_card"), at: .zero, anchor: .topLeading)
}.frame(width: 800, height: 499, alignment: .topLeading)
//.padding([.top], -20)
ScrollView([.horizontal, .vertical]) {
Image(uiImage: canvass.asImage(size: CGSize(width: 800, height: 499)))
}.frame(width: 300, height: 600)
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
See result