Use Canvas elements to create HiDPI image file?

Is it possible to use the Canvas elements to build a PNG file that would be displayed in high resolution on a HiDPI screen? For example, if I draw a circle and a square at 100x100 pixels, save that to a PNG file, and then display that PNG file then it won't look all that sharp on a HiDPI screen. I'd be able to see the pixels on the curve of the circle. What I'd like, if it's possible, would be to be able to use the same pipeline pilot code, using canvas elements, to generate images that will show up as the same physical size on a web page (in this example roughly 3cm x 3cm) but will show up as "regular" resolution on a standard screen and HiDPI on a HiDPI screen.  Is there a way to use the canvas elements to build HiDPI files?  Or do I just build PNG files with more pixels, and then use HTML code to shrink it back down?

In the example protocol screenshot below, I have built a canvas object with a 100x100 pixel square and a 50 pixel radius circle inside.  It's about 3cm x 3cm on my screen.  I can see the individual pixels on the circle.  How would I build this image so that it's much sharper on a HiDPI screen but still displays at roughly 3cm x 3cm?