Show Points On Canvas
I have JSON object of points. I am trying to paint that points on canvas. But code is not working. Where I am doing wrong?
Solution 1:
Your JSON points have prev and curr as the same points. With a quick fix, use the prev coordinates from one entry, and the curr coordinates from the next. You will also need to adjust the for loop to prevent overruning the points list length.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var t = [{"prevX":32,"prevY":102,"currX":32,"currY":102,"color":"#000000","width":4},{"prevX":32,"prevY":103,"currX":32,"currY":103,"color":"#000000","width":4},{"prevX":32,"prevY":105,"currX":32,"currY":105,"color":"#000000","width":4},{"prevX":32,"prevY":110,"currX":32,"currY":110,"color":"#000000","width":4},{"prevX":32,"prevY":113,"currX":32,"currY":113,"color":"#000000","width":4},{"prevX":32,"prevY":118,"currX":32,"currY":118,"color":"#000000","width":4},{"prevX":32,"prevY":125,"currX":32,"currY":125,"color":"#000000","width":4},{"prevX":32,"prevY":133,"currX":32,"currY":133,"color":"#000000","width":4},{"prevX":32,"prevY":140,"currX":32,"currY":140,"color":"#000000","width":4},{"prevX":32,"prevY":146,"currX":32,"currY":146,"color":"#000000","width":4},{"prevX":32,"prevY":154,"currX":32,"currY":154,"color":"#000000","width":4},{"prevX":32,"prevY":163,"currX":32,"currY":163,"color":"#000000","width":4},{"prevX":32,"prevY":168,"currX":32,"currY":168,"color":"#000000","width":4},{"prevX":32,"prevY":175,"currX":32,"currY":175,"color":"#000000","width":4},{"prevX":32,"prevY":178,"currX":32,"currY":178,"color":"#000000","width":4},{"prevX":32,"prevY":181,"currX":32,"currY":181,"color":"#000000","width":4},{"prevX":32,"prevY":189,"currX":32,"currY":189,"color":"#000000","width":4},{"prevX":32,"prevY":196,"currX":32,"currY":196,"color":"#000000","width":4},{"prevX":32,"prevY":203,"currX":32,"currY":203,"color":"#000000","width":4},{"prevX":32,"prevY":206,"currX":32,"currY":206,"color":"#000000","width":4},{"prevX":32,"prevY":210,"currX":32,"currY":210,"color":"#000000","width":4},{"prevX":32,"prevY":219,"currX":32,"currY":219,"color":"#000000","width":4},{"prevX":32,"prevY":225,"currX":32,"currY":225,"color":"#000000","width":4},{"prevX":32,"prevY":230,"currX":32,"currY":230,"color":"#000000","width":4},{"prevX":32,"prevY":236,"currX":32,"currY":236,"color":"#000000","width":4},{"prevX":32,"prevY":241,"currX":32,"currY":241,"color":"#000000","width":4},{"prevX":32,"prevY":248,"currX":32,"currY":248,"color":"#000000","width":4},{"prevX":32,"prevY":256,"currX":32,"currY":256,"color":"#000000","width":4},{"prevX":32,"prevY":260,"currX":32,"currY":260,"color":"#000000","width":4},{"prevX":32,"prevY":265,"currX":32,"currY":265,"color":"#000000","width":4},{"prevX":32,"prevY":266,"currX":32,"currY":266,"color":"#000000","width":4}];
var t2 =[{"prevX":221,"prevY":103,"currX":221,"currY":103,"color":"#000000","width":4},{"prevX":221,"prevY":106,"currX":221,"currY":106,"color":"#000000","width":4},{"prevX":222,"prevY":110,"currX":222,"currY":110,"color":"#000000","width":4},{"prevX":224,"prevY":115,"currX":224,"currY":115,"color":"#000000","width":4},{"prevX":224,"prevY":121,"currX":224,"currY":121,"color":"#000000","width":4},{"prevX":225,"prevY":126,"currX":225,"currY":126,"color":"#000000","width":4},{"prevX":225,"prevY":133,"currX":225,"currY":133,"color":"#000000","width":4},{"prevX":225,"prevY":146,"currX":225,"currY":146,"color":"#000000","width":4},{"prevX":225,"prevY":152,"currX":225,"currY":152,"color":"#000000","width":4},{"prevX":226,"prevY":162,"currX":226,"currY":162,"color":"#000000","width":4},{"prevX":227,"prevY":172,"currX":227,"currY":172,"color":"#000000","width":4},{"prevX":227,"prevY":178,"currX":227,"currY":178,"color":"#000000","width":4},{"prevX":227,"prevY":190,"currX":227,"currY":190,"color":"#000000","width":4},{"prevX":227,"prevY":199,"currX":227,"currY":199,"color":"#000000","width":4},{"prevX":227,"prevY":212,"currX":227,"currY":212,"color":"#000000","width":4},{"prevX":227,"prevY":227,"currX":227,"currY":227,"color":"#000000","width":4},{"prevX":229,"prevY":234,"currX":229,"currY":234,"color":"#000000","width":4},{"prevX":230,"prevY":242,"currX":230,"currY":242,"color":"#000000","width":4},{"prevX":230,"prevY":248,"currX":230,"currY":248,"color":"#000000","width":4},{"prevX":230,"prevY":252,"currX":230,"currY":252,"color":"#000000","width":4},{"prevX":231,"prevY":256,"currX":231,"currY":256,"color":"#000000","width":4},{"prevX":232,"prevY":260,"currX":232,"currY":260,"color":"#000000","width":4},{"prevX":232,"prevY":261,"currX":232,"currY":261,"color":"#000000","width":4},{"prevX":232,"prevY":262,"currX":232,"currY":262,"color":"#000000","width":4},{"prevX":232,"prevY":263,"currX":232,"currY":263,"color":"#000000","width":4}];
for(var i=0;i<t.length-1;i++){ // t.length-1 to prevent overflow
var d1 = t[i]; // point1
var d2 = t[i+1]; // (next) point2
ctx.beginPath();
ctx.moveTo(d1.prevX, d1.prevY); // prev from point1
ctx.lineTo(d2.currX, d2.currY); // curr from point2
ctx.globalAlpha=1;
ctx.strokeStyle = d2.color; // use point2 styles
ctx.lineWidth = d2.width;
ctx.stroke();
ctx.closePath();
}
for(var i=0;i<t2.length-1;i++){ // t2.length-1 to prevent overflow
var d1 = t2[i]; // point1 from line t2
var d2 = t2[i+1]; // (next) point2
ctx.beginPath();
ctx.moveTo(d1.prevX, d1.prevY); // prev from point1
ctx.lineTo(d2.currX, d2.currY); // curr from point2
ctx.globalAlpha=1;
ctx.strokeStyle = d2.color; // use point2 styles
ctx.lineWidth = d2.width;
ctx.stroke();
ctx.closePath();
}<canvas id="myCanvas" width="256" height="256" style="border:2px solid #d3d3d3;">Solution 2:
As prev and curr points are same, the line is not visible. Instead you can use ctx.arc() to show the points.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var t = [{
"prevX": 39,
"prevY": 58,
"currX": 39,
"currY": 58,
"color": "#000000",
"width": 4
}, {
"prevX": 40,
"prevY": 67,
"currX": 40,
"currY": 67,
"color": "#000000",
"width": 4
}, {
"prevX": 41,
"prevY": 81,
"currX": 41,
"currY": 81,
"color": "#000000",
"width": 4
}, {
"prevX": 44,
"prevY": 94,
"currX": 44,
"currY": 94,
"color": "#000000",
"width": 4
}, {
"prevX": 46,
"prevY": 107,
"currX": 46,
"currY": 107,
"color": "#000000",
"width": 4
}, {
"prevX": 46,
"prevY": 119,
"currX": 46,
"currY": 119,
"color": "#000000",
"width": 4
}, {
"prevX": 49,
"prevY": 132,
"currX": 49,
"currY": 132,
"color": "#000000",
"width": 4
}, {
"prevX": 52,
"prevY": 141,
"currX": 52,
"currY": 141,
"color": "#000000",
"width": 4
}, {
"prevX": 54,
"prevY": 150,
"currX": 54,
"currY": 150,
"color": "#000000",
"width": 4
}, {
"prevX": 61,
"prevY": 165,
"currX": 61,
"currY": 165,
"color": "#000000",
"width": 4
}, {
"prevX": 63,
"prevY": 172,
"currX": 63,
"currY": 172,
"color": "#000000",
"width": 4
}, {
"prevX": 65,
"prevY": 178,
"currX": 65,
"currY": 178,
"color": "#000000",
"width": 4
}, {
"prevX": 66,
"prevY": 186,
"currX": 66,
"currY": 186,
"color": "#000000",
"width": 4
}, {
"prevX": 68,
"prevY": 195,
"currX": 68,
"currY": 195,
"color": "#000000",
"width": 4
}, {
"prevX": 70,
"prevY": 196,
"currX": 70,
"currY": 196,
"color": "#000000",
"width": 4
}, {
"prevX": 70,
"prevY": 198,
"currX": 70,
"currY": 198,
"color": "#000000",
"width": 4
}];
for (var i = 0; i < t.length; i++) {
var d = t[i];
ctx.beginPath();
ctx.arc(d.prevX, d.prevY, 3, 0, 2*Math.PI);
//ctx.lineTo(d.currX, d.currY);
//ctx.globalAlpha = 1;
ctx.strokeStyle = d.color;
//ctx.lineWidth = d.width;
ctx.stroke();
ctx.closePath();
}<canvas id="myCanvas" width="300" height="250" style="border:1px solid #000000;">Make a function and use it. As this is a line use beginPath() only at starting of drawing and at end use closePath() to close it.
DEMO
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var t1 = [{"prevX":32,"prevY":102,"currX":32,"currY":102,"color":"#000000","width":4},{"prevX":32,"prevY":103,"currX":32,"currY":103,"color":"#000000","width":4},{"prevX":32,"prevY":105,"currX":32,"currY":105,"color":"#000000","width":4},{"prevX":32,"prevY":110,"currX":32,"currY":110,"color":"#000000","width":4},{"prevX":32,"prevY":113,"currX":32,"currY":113,"color":"#000000","width":4},{"prevX":32,"prevY":118,"currX":32,"currY":118,"color":"#000000","width":4},{"prevX":32,"prevY":125,"currX":32,"currY":125,"color":"#000000","width":4},{"prevX":32,"prevY":133,"currX":32,"currY":133,"color":"#000000","width":4},{"prevX":32,"prevY":140,"currX":32,"currY":140,"color":"#000000","width":4},{"prevX":32,"prevY":146,"currX":32,"currY":146,"color":"#000000","width":4},{"prevX":32,"prevY":154,"currX":32,"currY":154,"color":"#000000","width":4},{"prevX":32,"prevY":163,"currX":32,"currY":163,"color":"#000000","width":4},{"prevX":32,"prevY":168,"currX":32,"currY":168,"color":"#000000","width":4},{"prevX":32,"prevY":175,"currX":32,"currY":175,"color":"#000000","width":4},{"prevX":32,"prevY":178,"currX":32,"currY":178,"color":"#000000","width":4},{"prevX":32,"prevY":181,"currX":32,"currY":181,"color":"#000000","width":4},{"prevX":32,"prevY":189,"currX":32,"currY":189,"color":"#000000","width":4},{"prevX":32,"prevY":196,"currX":32,"currY":196,"color":"#000000","width":4},{"prevX":32,"prevY":203,"currX":32,"currY":203,"color":"#000000","width":4},{"prevX":32,"prevY":206,"currX":32,"currY":206,"color":"#000000","width":4},{"prevX":32,"prevY":210,"currX":32,"currY":210,"color":"#000000","width":4},{"prevX":32,"prevY":219,"currX":32,"currY":219,"color":"#000000","width":4},{"prevX":32,"prevY":225,"currX":32,"currY":225,"color":"#000000","width":4},{"prevX":32,"prevY":230,"currX":32,"currY":230,"color":"#000000","width":4},{"prevX":32,"prevY":236,"currX":32,"currY":236,"color":"#000000","width":4},{"prevX":32,"prevY":241,"currX":32,"currY":241,"color":"#000000","width":4},{"prevX":32,"prevY":248,"currX":32,"currY":248,"color":"#000000","width":4},{"prevX":32,"prevY":256,"currX":32,"currY":256,"color":"#000000","width":4},{"prevX":32,"prevY":260,"currX":32,"currY":260,"color":"#000000","width":4},{"prevX":32,"prevY":265,"currX":32,"currY":265,"color":"#000000","width":4},{"prevX":32,"prevY":266,"currX":32,"currY":266,"color":"#000000","width":4}];
var t2 =[{"prevX":221,"prevY":103,"currX":221,"currY":103,"color":"#000000","width":4},{"prevX":221,"prevY":106,"currX":221,"currY":106,"color":"#000000","width":4},{"prevX":222,"prevY":110,"currX":222,"currY":110,"color":"#000000","width":4},{"prevX":224,"prevY":115,"currX":224,"currY":115,"color":"#000000","width":4},{"prevX":224,"prevY":121,"currX":224,"currY":121,"color":"#000000","width":4},{"prevX":225,"prevY":126,"currX":225,"currY":126,"color":"#000000","width":4},{"prevX":225,"prevY":133,"currX":225,"currY":133,"color":"#000000","width":4},{"prevX":225,"prevY":146,"currX":225,"currY":146,"color":"#000000","width":4},{"prevX":225,"prevY":152,"currX":225,"currY":152,"color":"#000000","width":4},{"prevX":226,"prevY":162,"currX":226,"currY":162,"color":"#000000","width":4},{"prevX":227,"prevY":172,"currX":227,"currY":172,"color":"#000000","width":4},{"prevX":227,"prevY":178,"currX":227,"currY":178,"color":"#000000","width":4},{"prevX":227,"prevY":190,"currX":227,"currY":190,"color":"#000000","width":4},{"prevX":227,"prevY":199,"currX":227,"currY":199,"color":"#000000","width":4},{"prevX":227,"prevY":212,"currX":227,"currY":212,"color":"#000000","width":4},{"prevX":227,"prevY":227,"currX":227,"currY":227,"color":"#000000","width":4},{"prevX":229,"prevY":234,"currX":229,"currY":234,"color":"#000000","width":4},{"prevX":230,"prevY":242,"currX":230,"currY":242,"color":"#000000","width":4},{"prevX":230,"prevY":248,"currX":230,"currY":248,"color":"#000000","width":4},{"prevX":230,"prevY":252,"currX":230,"currY":252,"color":"#000000","width":4},{"prevX":231,"prevY":256,"currX":231,"currY":256,"color":"#000000","width":4},{"prevX":232,"prevY":260,"currX":232,"currY":260,"color":"#000000","width":4},{"prevX":232,"prevY":261,"currX":232,"currY":261,"color":"#000000","width":4},{"prevX":232,"prevY":262,"currX":232,"currY":262,"color":"#000000","width":4},{"prevX":232,"prevY":263,"currX":232,"currY":263,"color":"#000000","width":4}];
drawLine(t1);
drawLine(t2);
function drawLine(t){
ctx.beginPath();
for (var i = 1; i < t.length; i++) {
var d1 = t[i-1], d2 = t[i];
ctx.moveTo(d1.prevX, d1.prevY);
ctx.lineTo(d2.currX, d2.currY);
ctx.strokeStyle = d2.color;
ctx.lineWidth = d2.width;
ctx.stroke();
}
ctx.closePath();
}<canvas id="myCanvas" width="300" height="350" style="border:1px solid #000000;">
Post a Comment for "Show Points On Canvas"