Shiny -- 'ggsave' printed plots looks different from plot displayed in shiny app - r

Question

I've made a cool Shiny app that allows users to resize their plot and move it around on the canvas.
The problem is, sometimes the downloaded plot looks very different from what is displayed in the view panel - it comes out as a square graphic that might have the plot cut off if as you change the scale and positioning.
If you draw it at 0.5 scale it looks the same in browser and in the downloaded png. -- But if you make it to scale 0.8, or even simply scale 1.0, it'll look perfect in the view panel but ugly and misaligned when printed with ggsave().
Perhaps this is a question about adjusting parameters to ggsave? Or is it that my background image is sized strangely (1920 x 1028 pixels)? Or perhaps the reactive panel throws it off somehow...? I'm confused at this point.
Anyway I drew a grey background behind the plot area so that you can easy tell the canvas from the panel.
And here is a minimal reproducible example.
library(shiny)
library(tidyverse)
library(magick)
library(cowplot)
picture <- 'https://content.halocdn.com/media/Default/games/halo-5-guardians/map-images/arena/arena_maps_sustain_array04-bddc574f8e3445d08f24ef859fb96941.jpg'
background <- image_read(picture)
ui <- fluidPage(
# Application title
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30),
sliderInput("xposition",
"X-Axis Position",
min = -1,
max = 1,
value = 0,
step = 0.1),
sliderInput("yposition",
"Y-Axis Position",
min = -1,
max = 1,
value = 0,
step = 0.1),
sliderInput("scale",
"Chart Scale",
min = .25,
max = 1,
value = .5,
step = 0.1)),
# Show a plot over grey background to see how canvas shifts
mainPanel(style = "background:grey",
plotOutput("distPlot"),
downloadButton("downloadPlot", "Download")
)
)
)
server <- function(input, output) {
xposition <- reactive({input$xposition})
yposition <- reactive({input$yposition})
scale <- reactive({input$scale})
plot <- reactive({
base_plot <- ggplot(faithful, aes(x = waiting), bins = input$bin) +
geom_histogram()
ggdraw() +
draw_image(background) +
draw_plot(base_plot, x = xposition(), y = yposition(), scale = scale())
})
## Use Cowplot package to alter scale and position
output$distPlot <- renderPlot({
# draw the histogram with the specified number of bins
plot()
})
output$downloadPlot <- downloadHandler(
filename = "my_awesome_plot.png",
content = function(file) {
ggsave(file, plot())
}
)
}
# Run the application
shinyApp(ui = ui, server = server)
If you try scale 0.5, scale 0.8, and scale 1.0, you'll see what I mean!
Any help????
Note: The reproducible example above should be enough to find the problem, but if you want to see a more "in depth" example here is my real app which has more images in it and more reactive scalings and positionings.
https://jjohn987.shinyapps.io/Halo5_Stats/
Type in a player's tag name (e.g., these work => hi, k, hairball9000, or other gamer tags people use, but no commas or spaces) and you'll see that what appears to be "the bottom" of the plot is very different than what the bottom is in the download... Keep in mind I haven't applied for any significant api bandwidth from Microsoft so the calls might get timed out depending on how many people try to help!