html5 canvas toDataURL poor image quality on mobile

Question

I'm using the toDataURL("image/png") function. My canvas has several lines, colored shapes and text. The resulting png looks good on desktop Chrome. However, the image is very low quality, pixelated, on mobile Chrome.

Is there a way to improve image quality for mobile devices?

Answer 1

You can set the canvas CSS size smaller than the canvas element size.

This causes the browser to draw more "densely" on the canvas.

HTML:

<canvas id="canvas" width=600 height=300></canvas>

CSS:

#canvas {
    width:300px;
    height:150px;
}        

A Demo: http://jsfiddle.net/m1erickson/N8JL6/