I'm just trying to make a circle with a thick anti-aliased stroke in canvas.
The circle gets drawn as expected, but the edges of the stroke are very jaggy. I keep reading that Chrome forces anti-aliasing, so not sure what to do...
Fiddle: http://jsfiddle.net/nipponese/hWsxw/
HTML
<div id="main">
<canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas>
<div id="counter" style="height: 100px; width: 100px; border: 1px solid #000">
</div>
</div>
The JS + jQuery
<script>
function calc(myVal) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = 70;
ctx.beginPath();
ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
ctx.lineWidth = 14;
ctx.stroke();
};
$(document).ready(function() {
var count = 0;
var parsedCount;
function go(){
if (count <= 200) {
parsedCount = count*.01
$('#counter').html('<p>' + parsedCount + '</p>');
calc(parsedCount);
count++;
}
}
setInterval(go, 10)
});
</script>
My co-worker just pointed out that I need to use clearRect to clear the canvas after each draw. The strokes were just being drawn on top of each other.
function calc(myVal) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = 70;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
ctx.lineWidth = 14;
ctx.stroke();
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With