HTML 5 Canvas & JSON Demo

    1. JavaScript object notation.

    2 . You can compare it with XML.

The purpose of this demo :-

   1.Shows how to detect whether canvas is supported in browser or not.

   2.Shows how to display the JSON data on a canvas.
   3.Shows how to draw images on canvas.
   4.shows how to attach events to canvas.

Details

“Modernizr” is a javascript  library api for HTML 5.Through this library we can detect whether a browser supports HTML5 elements or not. The sample code below shows whether a browser supports canvas element or not.The link to download “Modernizr” is : http://modernizr.com/download/ .

$(document).ready(function() {
if (Modernizr.canvas) {
 populateCanvas(json);
 } else {
  alert("No Canvas Support");
 }
});

var json = {
 "header" : [ "Name", "ID", "Title", "Roll No" ],
 "bindings" : [ {
  "objno":"1",
  "Name" : "Sandeep",
  "ID" : "01",
  "Title" : "Its me",
  "hobby" : "Reading"
 }, {
  "objno":"2",
  "Name" : "Surabhi",
  "ID" : "02",
  "Title" : "My Wife",
  "hobby" : "Shopping"
 }, {
  "objno":"3",
  "Name" : "Sangeeta",
  "ID" : "03",
  "Title" : "My Sister",
  "hobby" : "Roaming"
 } ]};

Now , get a 2d canvas context for a canvas ,

code for getting context for “myCanvas” ,

var getCanvasContext = function() {
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 return context;
};

code for iterating json and drawing the code

var createTableObjects = function(tablebindings, canvasContext) {

 var imageposX = 69, imageposy = 50;
 var arrayOfobj = new Array();
 for ( var anObject in tablebindings) {
  var imageObj = new Image();
  imageObj.src = "images/obj.jpg";
  arrayOfobj.push(imageObj);

 }
 for ( var anObject in arrayOfobj) {
  arrayOfobj[anObject].onload = function() {
   canvasContext.drawImage(arrayOfobj[anObject], imageposX, imageposy);
   imageposX += 40;

  };
  
 }

};

code for clearing the canvas, for each click we need to clear the canvas and redraw it,

var clearCanvas=function(){
 var canvas=document.getElementById("myCanvas");
 canvas.width = canvas.width;

};

code for getting the details of clicked object,

var getObjectDetails=function(objectno){
 
 var objectlist=json.bindings;
 var clickedobj=null;
 for ( var anObject in objectlist) {
  if(objectno==objectlist[anObject].objno){
   clickedobj= objectlist[anObject];
   break;
  }

 }
 return clickedobj;
};

the main method for event clicking and renering,

var populateCanvas = function(json) {

 var canvasContext = getCanvasContext();
 createTableObjects(json.bindings, canvasContext);

 $("#myCanvas").click(function(e){
  clearCanvas();
  createTableObjects(json.bindings, canvasContext);
  var x = Math.floor((e.pageX-$("#myCanvas").offset().left) / 20);
  var y = Math.floor((e.pageY-$("#myCanvas").offset().top) / 20);
  var objectno=Math.ceil(x/2)-1;
  var objdetail=getObjectDetails(objectno);
  if(objdetail!=null){
   canvasContext.fillText(objdetail.Name, (e.pageX-$("#myCanvas").offset().left),
     (20));
   canvasContext.fillText(objdetail.Title, (e.pageX-$("#myCanvas").offset().left),
     (130));
   canvasContext.fillText("Hobby : "+objdetail.hobby, (e.pageX-$("#myCanvas").offset().left),
     (140));
  }
  
 });


};

output

The POC download link :-
download poc