canvas

클릭한 곳에 사각형 그리기

by Kim Ara

HTML

<canvas id="myCanvas" width="800" height="400"> </canvas>

CSS

#myCanvas{border:1px solid}

JavaScript

var canvas=$('#myCanvas').get(0);
var ctx=canvas.getContext('2d');

$('#myCanvas').click(function(e){
	
  var mouseX = e.clientX - ctx.canvas.offsetLeft;
  var mouseY = e.clientY - ctx.canvas.offsetTop;
  ctx.fillStyle="red";
  // 마우스 클릭한 곳에서 사각형의 중심이 되어서 생성이 된다.
  ctx.fillRect(mouseX-10, mouseY-10,20,20)
  
  //console.log(mouseX+','+mouseY);
});