How to draw in canvas read json?

Question

I am trying to use HTML5 canvas . I managed to draw on canvas, but I need to do this dynamically. This is my JavaScript code:

 var c=document.getElementById("yellow"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(247,373); ctx.lineTo(0,390); ctx.lineTo(5,21); ctx.lineTo(245,0); ctx.lineTo(247,373); ctx.closePath(); ctx.fillStyle="#ffca05"; ctx.globalAlpha=0.7; ctx.strokeStyle = '#ffca05'; ctx.fill(); ctx.stroke(); 

I need to read data from this json array and draw using these coordinates.

 [{"x":"247", "y":"373"}, {"x":"0", "y":"390"},{"x":"5", "y":"21"},{"x":"245", "y":"0"}, {"x":"247", "y":"373"}] 

Answer 1

All you have to do is ctx.lineTo() over the JS object in the for loop and re-execute ctx.lineTo() . Note: the first ctx.lineTo() after a ctx.beginPath() acts like a ctx.moveTo() .

You can run this code snippet to check the result:

 var c=document.getElementById("yellow"); var ctx=c.getContext("2d"); var json=[ {"x":"247", "y":"373"}, {"x":"0", "y":"390"}, {"x":"5", "y":"21" }, {"x":"245", "y":"0" }, {"x":"247", "y":"373"} ]; ctx.beginPath(); for(var i in json){ ctx.lineTo(json[i].x,json[i].y); } ctx.closePath(); ctx.fillStyle="#ffca05"; ctx.globalAlpha=0.7; ctx.strokeStyle="#ffca05"; ctx.fill(); ctx.stroke(); 

 <canvas id="yellow" width="250" height="400"></canvas> 

PS: I can see that the top corner on the top edge of the canvas (and presumably the left too) is a bit cut off. Just add 1 or so to each coordinate to fix this:

 [ {"x":"248", "y":"374"}, {"x":"1", "y":"391"}, {"x":"6", "y":"22" }, {"x":"246", "y":"1" }, {"x":"248", "y":"374"} ]; 

Answer 2

I cannot comment yet, but as for reading an external JSON file: if your file is accessible at some URL, you can use AJAX via jQuery to easily get the JSON data that you need, parse it and save it in a variable, local to your web page / application. Quick example:

 var myJSON; //the json object data you're going to draw to canvas with $(document).ready(function(){ $.ajax({ url: "myurl.com/myjsonfile", dataType: "text", success: function(data) { myJSON = $.parseJSON(data); drawToCanvas(myJSON); //you can, perhaps, make the code //Xufox provided into a function that //you pass your myJSON var to once it //is loaded. } }); }) 

A call to $ .ajax will handle receiving data from the above URL and will only execute the drawToCanvas () method after the data has been loaded and passed to myJSON (which is then passed to the method).

You can refer to the parameter directly in your function or store it in a local variable:

 function drawToCanvas(jsonObj) { var json = jsonObj; ctx.beginPath(); for(var i in json){ ctx.lineTo(json[i].x,json[i].y); } ...