javascript HTML5 canvas

canvasをjavascriptで操作した。

javascriptのソースは以下のとおり。

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded(){
  canvasApp();
}

function canvasApp(){
  var myCanvas=document.getElementById("myCanvas");
  var context=myCanvas.getContext("2d");
  var canvasW=800;
  var canvasH=400;

  setScreen();

  myCanvas.addEventListener("click", eventCanvasClicked, false);

  function setScreen(){
    context.strokeStyle="#000000";
    context.strokeRect(0, 0, canvasW, canvasH);
  }

  function eventCanvasClicked(e){
    drawCircle(e);
  }

  function drawCircle(e){
    //色をランダムに決める
    var randomRed=Math.floor(Math.random()*256);
    var randomGreen=Math.floor(Math.random()*256);
    var randomBlue=Math.floor(Math.random()*256);

    //クリックした位置を取得する
    var rect=myCanvas.getBoundingClientRect();
    var mouseX=e.clientX-rect.left;
    var mouseY=e.clientY-rect.top;
    
    //円を描く
    context.fillStyle="rgba("+randomRed+", "+randomGreen+", "+randomBlue+", 0.5)";
    context.beginPath();
    context.arc(mouseX, mouseY, 50, 0, Math.PI*2, true);
    context.fill();
  }
}