CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Francis Snipe
Francis Snipe

Reputation: 551

html5 canvas toDataURL poor image quality on mobile

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?

Upvotes: 0

Views: 1976

Answers (1)

markE
markE

Reputation: 105015

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/

Upvotes: 2

Related Questions