function drawMycrograph(ddata){
  var canvas = document.getElementById("canvasSimplePhoto");
  var length;
  var context;

  data = JSON.parse(ddata);

//  context.scale(0.5,0.5);
  if(!canvas || !canvas.getContext){
    return(false);
  }
  else if(canvas.getContext){
      context=canvas.getContext('2d')
    }
    console.log(data);
  length = data.length;
  console.log(length);
  var imgData = context.createImageData(length,length);

  for (var i=0;i<length;i++){
    for (var j=0;j<length;j++){
      var n = j*4+i*length*4;
      var pixel = data[i][j];
      imgData.data[n]   = pixel;
      imgData.data[n+1] = pixel;
      imgData.data[n+2] = pixel;
      imgData.data[n+3] = 255;
    }
  }
  context.putImageData(imgData, 0, 0);

}
$(function(){

  var state="off"
  var canvas = document.getElementById("canvasGuide");
  var ctx=canvas.getContext('2d');
  var center = {x:512/2,y:512/2};
  $("#dispGuideButton").click( function(){
    if(state=="on"){
      ctx.clearRect(0,0,512,512);
      state="off";
    }else{

    // 横線を引く
  ctx.beginPath();
  ctx.moveTo(0, center.y);
  ctx.lineTo(512, center.y);
  ctx.closePath();
  ctx.stroke();


// 縦線を引く
  ctx.beginPath();
  ctx.moveTo(center.x, 0);
  ctx.lineTo(center.x, 512);
  ctx.closePath();
  ctx.stroke();
  ctx . clearRect(center.x-10,center.y-10, 20, 20);
  state="on";
}
});
});
