User:Marlon/wikicanvas

From Media Design: Networked & Lens-Based wiki
Jump to navigation Jump to search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script>
// Define a draw function that contains your
// drawing code
// var data = ["een","twee","tomaat","westerse filosofie","hi","zes"];
// var data = ["een","twee"];

function read(d){
	data = d;
}

function draw(){
  c = document.getElementById("canvas")
  //console.log("c is",c)
  p = c.getContext("2d")
  var i =  0; 
  var y = 10;

// while (i<data.length){ 

//   p.fillText(data[i], 10, y);
//   i+=1 
//   y+=10

// }

for (var magic in data.query.pages) {}

data = data.query.pages[magic].revisions;

for (i=0;i<data.length;i+=1){

  p.fillText(data[i].user, 10, y);
  y+=10

}

  // p.fillText(data[0], 10, 10);
  // p.fillText(data[1], 10, 50);
  // p.fillText(data[2], 10, 100);
  // p.fillText(data[3], 10, 150);

}
</script>

<script src="http://en.wikipedia.org/w/api.php?action=query&prop=revisions&rvprop=content&format=json&titles=tom_Cruise&rvlimit=10&rvprop=user|comment|timestamp&callback=read">
</script>

</head>
<!-- The body tag then will call draw() when the page has loaded -->
<body onload="draw()">
<canvas id="canvas" width="1250" height="1250" style="border: 1px solid black"></canvas>
</body>
</html>