CODEWITHSUNDEEP
ioshtmlcanvashtml5-canvas
tmaximini
tmaximini

Reputation: 8503

Html5 Canvas: Can I draw really sharp on non-retina devices like iPad2?

I am currently working on a mobile web application making heavily use of the HTML5 <canvas>. I am drawing a lot of circles and texts on the canvas.

I am doing the following to detect if I am currently drawing on a HD / Retina display:

// Retina Display ?             
if (window.devicePixelRatio == 2) {
  canvas.style.width = canvas.width + "px";
  canvas.style.height = canvas.height + "px";
  canvas.width = canvas.width * 2;
  canvas.height = canvas.height * 2;
  context.scale(2, 2);
}

If I am on Retina display, this will just draw twice as big and after scale it down which gives me really sharp circles and texts.

But on a iPad2 for example the texts look a little pixel-ish and blurry, the corners are not really sharp and so on. But when I compare it with native iOS apps I see that the display can actually draw this sharp, because there the apps / texts / corners look really nice. I wonder if there are any tricks for canvas drawing that make it things look sharper or if there is a logical explanation that a canvas can not look as sharp as a native iOS application on a non-hd display...

thanks!

Upvotes: 2

Views: 1822

Answers (3)

Adi
Adi

Reputation: 6354

Try this code below, might just help,

if (window.devicePixelRatio == 2) {
  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight * 2;
  context.scale(2, 2);
}

Upvotes: 0

Richard
Richard

Reputation: 5089

You could try offsetting your coordinates to the nearest half-pixel. ie Instead of this: .lineTo(5, 5) do this: .lineTo(5.5, 5.5).

Upvotes: 1

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83788

The native text rendering methods must take different rendering paths, because they have more context information to use for anti-aliasing than <canvas> draw() methods, like subpixel antialiasing. (Subpixel anti-aliasing would produces really ugly artifacts if pixel scaled up)

I am afraid there are no solutions to control the text rendering on this low level and you must simply take what <canvas> gives on you.

Try experiment with different fonts.

Alternatively, you can try overlay DOM text over <canvas> using CSS position: absolute in a HUD style.

Should I use multiple canvases (HTML 5) or use divs to display HUD data?

Upvotes: 1

Related Questions