I draw a sine curve in html5 canvas. but the curve was much blurred. pls help me to resolve.

Fiddle

`` var Wave=[];for(i=0;i<6.28;i+=0.03){Wave.push([(i*(350/6.28)),130-(Math.sin(i)*80)]);}ctx.beginPath();ctx.moveTo(50+Wave[0][0],Wave[0][1])for(i=0;i<Wave.length;i++){ctx.lineTo(50+Wave[i][0],Wave[i][1]);ctx.strokeStyle="red";ctx.lineWidth=1.5;ctx.lineJoin = 'round';ctx.stroke();}``

You are adding a new line segment in each iteration of the second `for` loop but you are also drawing the stroke for all previous segments, which results in the segments to be drawn multiple times. Call `ctx.stroke()` only once, after the loop.

``````function DrawCurve() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var Wave = [];

for (var i = 0; i < 6.28; i += 0.03) {
Wave.push([(i * (350 / 6.28)), 130 - (Math.sin(i) * 80)]);
}

ctx.beginPath();
ctx.moveTo(50 + Wave[0][0], Wave[0][1]);

for (var i = 0; i < Wave.length; i++) {
ctx.lineTo(50 + Wave[i][0], Wave[i][1]);
ctx.strokeStyle = "red";
ctx.lineWidth = 1.5;
ctx.lineJoin = 'round';
}

ctx.stroke();
}

DrawCurve();``````
``<canvas id="canvas" width="430" height="260"></canvas>``

Top