I have built a front end vanilla javascript app that allows the user to draw a canvas image based on geo-data input.
I am currently using .toDataURL in JS to convert the canvas element to a string that is then passed to WordPress/Woocommerce via API.
All of this is working. However, I really need to increase the quality of the canvas image. This needs to be able to be printed at 300dpi at A1 size (which is 7,016px x 9,933px in portrait).
The user currently sees a canvas drawing of around 1000px. Once the user submits, I have a function that redraws everything they have done, but multiplying all values used on the canvas to achieve my desired resolution.
This currently works fine on Desktop with this method even though it is a large image. However, testing on iOS in both Safari and Chrome, the .toDataURL function returns nothing and the string is blank. When I reduce the multiplier value, it does work. This would indicate to me that smaller devices don’t have enough memory to handle such a large image, or there is something else I don’t know about.
My question is, is there a solution to this problem? Maybe there is a way to pass the users geodata and generate the high resolution image server side using canvas and some sort of browser emulation?
I’m really stumped here, I would’ve thought there would be a solution for generating high quality canvas images. Maybe I have approached the entire project incorrectly?
Any help is much appreciated.