On a website I co-develop, I created a drawing application that sends data about the lines drawn on the <canvas> element to the server to create an image and save it at multiple sizes, which works. There is the standard (maximum) save which is saved to 320 x 212.
However, some users on my site use a pretty antiquated device/browser with a smaller viewport for the application, so there is a smaller image save at 240 x 176. To account for the canvas size difference and different sized saves, server-side I'm currently multiplying the coordinates to compensate when saving the image to the standard size from the smaller canvas. But this has the side-effect of random unfilled parts of the image showing up which were filled in on the canvas.
(On the canvas for the smaller device's viewport, the entire bottom portion was green, while my method of multiplying the coordinates to compensate caused many unfilled portions to appear on the scaled-up image)
So my first question is, would making the image as a vector image, scaling it up (while still a vector), and then saving it to the filesystem as a raster image fix that issue?
And secondly (if the answer to the first is a yes), then what would be the best way of doing this in PHP? I've heard of Cairo, but the information on it (namely tutorials for the PHP package) is quite lacking. Optimally, is there a way to do this in Imagick (create a vector from the specified coordinates, scale up for the standard save, then save as a raster)?
Or do I have to learn and use Cairo?