Angularjs corner canvas is blurry

Question

I created a directive for angularjs that renders four distance sensors using the html5 canvas element .

jsfiddle: http://jsfiddle.net/pgbyvtw7/

Unfortunately, I can’t get the picture clear and sharp , because everything is somehow blurry (at least on my Nexus5, on my PC monitor it looks good, but also not nice).

I mainly use

ctx.arc(x, y, 10, angleBackStart, angleStop, false);

I set the width and height of the canvas element not via css. I tried ctx.scale(2,2), but did nothing. I saw several articles that change things by 0.5, but since the circle is round, this also does not help.

Somehow it should be possible for the circles to be sharp, as the browser can display things like svg and border radius. I read the html5 rock article on hdpi canvas, but it was too focused on images and fonts, so maybe I skipped this thing.

Is there any way to make circles cool?

Answer 1

I updated your fiddle so that it actually scales cirle with ctx.scale, but it doesn't look so good anyway ... Using a scale of 50 completely removes all anti-aliasing. Using a 0.9 scale adds a bit more smoothing. Perhaps you can try it if it appears on your device.

var scale = 0.9;
canvas.setAttribute('width', canvas.width * scale);
canvas.setAttribute('height', canvas.height * scale);
ctx.scale(scale, scale);

And some CSS to make the canvas the same size as before:

canvas {
    width: 175px;
    height: 200px;
}

Updated fiddle

Answer 2

-, . :

<canvas height="400px" width="350px">

, , HTML.

// The canvas
var height = 400
var width = 350

CSS .

canvas {
   width: 175px;
   height: 200px;
}

, , CSS.

--- , CSS.