CODEWITHSUNDEEP
javascripthtmljsonhtml5-canvas
Bruno Laise
Bruno Laise

Reputation: 117

how draw in canvas read a json?

I'm trying to draw through on a HTML5 canvas. I managed to draw on the canvas but I need to do it 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 the 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"}]

Upvotes: 7

Views: 7082

Answers (2)

JLP1990
JLP1990

Reputation: 41

I cannot comment just yet, but as to the matter of reading an external JSON file: If your file is available on some URL, you can use AJAX through jQuery to easily get the JSON data you need, parse it and store it in a variable local to your webpage/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.
            }
        });
    })

The '$.ajax' call will handle obtaining the data from the URL you specified above, and will execute the 'drawToCanvas()' method only once the data has been loaded and passed to myJSON (which is then passed to the method).

You could reference 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);
    }
    ...

Upvotes: 0

Sebastian Simon
Sebastian Simon

Reputation: 19525

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

You can run this code snippet to verify 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 notice that the top corner at the top edge of the canvas (and presumably the left one as well) are 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"}
];

Upvotes: 3

Related Questions