<!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>
