polatengin/973

## 973
HTML5 sayfasında canvas ve javascript kullanarak çizim alanı oluşturma

## Index.html
<!doctype html>
<html>
  <head>
    <title>Mouse ile serbest çizim alanı</title>
    <script>
      var canvas, ctx, painting = false, previousMousePosition;

      function getMousePosition(event) {
        var rect = canvas.getBoundingClientRect();

        return {
          x: event.clientX – rect.left,
          y: event.clientY – rect.top
        };
      }

      function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
      }

      function handleMouseMove(e) {
        var mousePos = getMousePosition(e);

        if (painting) {
          drawLine(previousMousePosition.x, previousMousePosition.y, mousePos.x, mousePos.y);
          previousMousePosition = mousePos;
        }
      }

      window.onload = function () {
        canvas = document.getElementById('cizimAlani');
        ctx = canvas.getContext('2d');
        canvas.addEventListener('mousemove', handleMouseMove, false);
        canvas.addEventListener('mousedown', function (e) {
          previousMousePosition = getMousePosition(e);
          painting = true;
        });
        canvas.addEventListener('mouseup', function () {
          painting = false;
        });
      };
    </script>
  </head>
  <body>
    <canvas id="cizimAlani" width="400" height="400"></canvas>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Mouse ile serbest çizim alanı</title>
	<script>
	var canvas, ctx, painting = false, previousMousePosition;

	function getMousePosition(event) {
	var rect = canvas.getBoundingClientRect();

	return {
	x: event.clientX – rect.left,
	y: event.clientY – rect.top
	};
	}

	function drawLine(x1, y1, x2, y2) {
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.stroke();
	}

	function handleMouseMove(e) {
	var mousePos = getMousePosition(e);

	if (painting) {
	drawLine(previousMousePosition.x, previousMousePosition.y, mousePos.x, mousePos.y);
	previousMousePosition = mousePos;
	}
	}

	window.onload = function () {
	canvas = document.getElementById('cizimAlani');
	ctx = canvas.getContext('2d');
	canvas.addEventListener('mousemove', handleMouseMove, false);
	canvas.addEventListener('mousedown', function (e) {
	previousMousePosition = getMousePosition(e);
	painting = true;
	});
	canvas.addEventListener('mouseup', function () {
	painting = false;
	});
	};
	</script>
	</head>
	<body>
	<canvas id="cizimAlani" width="400" height="400"></canvas>
	</body>
	</html>