Why jCanvas draws poor quality circle on small sizes of canvas

Question

Just want to say, I don't use CSS, but on small size canvas quality of circle very poor.

Example: jcanvas https://jsfiddle.net/tkdn2rv6/25/

For example, everything is fine on the konvajs: konva https://jsfiddle.net/qup9s57y/23/

Why is the image so blurry?

I would like to use jcanvas, since it is smaller in size and use jQuery.

Answer 1

You must use detectPixelRatio Solution:

$('canvas').detectPixelRatio(function(ratio) {
    $('#canvas').drawArc({
    x: 20,  y: 20,  radius: 15,  strokeStyle: '#000',  strokeWidth: 1,
  });
});



var circle = new Konva.Circle({
  x: 20,  y: 20,  radius: 15,  stroke: '#000',  strokeWidth: 1
});

var layer = new Konva.Layer().add(circle);
new Konva.Stage({container: 'container',  width: 40,  height: 40}).add(layer);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>

<div id="container"></div>
<canvas id="canvas"></canvas>

Answer 2

I tried to reproduce your issue by putting both into one common snippet and the quality looks the same:

$('#canvas').drawArc({
  x: 20,  y: 20,  radius: 15,  strokeStyle: '#000',  strokeWidth: 1,
});

var circle = new Konva.Circle({
  x: 20,  y: 20,  radius: 15,  stroke: '#000',  strokeWidth: 1
});

var layer = new Konva.Layer().add(circle);
new Konva.Stage({container: 'container',  width: 40,  height: 40}).add(layer);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/2.2.1/konva.min.js"></script>

<div id="container"></div>
<canvas id="canvas"></canvas>