richy486/index.html

## index.html
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
        var images = {};

        function loadImages(sources, callback) {

          var loadedImages = 0;
          var numImages = 0;
          // get num of sources
          for(var src in sources) {
            numImages++;
          }
          for(var src in sources) {
            images[src] = new Image();
            images[src].onload = function() {
              if(++loadedImages >= numImages) {
                callback(images);
              }
            };
            images[src].src = sources[src];
          }
        }
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');


        var sources = {
          square: 'http://placekitten.com/g/578/400',
          circle: 'http://placekitten.com/g/230/230'
        };

        function displayImages(images) {

            // context.drawImage(images.circle, 0, 0);
            context.save();
            context.drawImage(images.square,0,0,images.square.width,images.square.height,0,0,canvas.width,canvas.height)

            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = canvas.height * 0.4;
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.clip();
            // context.drawImage(images.square, 0, 0);
            context.drawImage(images.circle,0,0,images.circle.width,images.circle.height,0,0,canvas.width,canvas.height)
            context.restore();
        }

        loadImages(sources, displayImages);

        function handleDrop(e) {
            e.stopPropagation(); // Stops some browsers from redirecting.
            e.preventDefault();

            var files = e.dataTransfer.files;
            for (var i = 0, f; f = files[i]; i++) {
              // Read the File objects in this FileList.
            }
        }


        var mouseDown = false,
        brushColor = "rgb(0, 0, 0)",
        hasText = true,
        clearCanvas = function () {
            if (hasText) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                hasText = false;
            }
        };

        // Image for loading
        var imgSquare = document.createElement("img");
        imgSquare.addEventListener("load", function () {
            clearCanvas();
            images.square = imgSquare;
            displayImages(images);
        }, false);

        var imgCircle = document.createElement("img");
        imgCircle.addEventListener("load", function () {
            clearCanvas();
            // context.drawImage(img, 0, 0);
            // sources.square = img.src;
            images.circle = imgCircle;
            displayImages(images);
        }, false);


        // To enable drag and drop
        canvas.addEventListener("dragover", function (evt) {
            evt.preventDefault();
        }, false);

        // Handle dropped image file - only Firefox and Google Chrome
        canvas.addEventListener("drop", function (evt) {
            var files = evt.dataTransfer.files;
            if (files.length > 0) {
                var file = files[0];
                if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
                    var reader = new FileReader();
                    // Note: addEventListener doesn't work in Google Chrome for this event
                    reader.onload = function (progressEvent) {


                        var centerX = canvas.width / 2;
                        var centerY = canvas.height / 2;
                        var dx = evt.clientX - centerX;
                        var dy = evt.clientY - centerY;
                        var distance = Math.sqrt(dx * dx + dy * dy);

                        console.log("evt : " + evt);
                        console.log(distance + " / " + (canvas.height * 0.4));

                        if (distance > canvas.height * 0.4) {
                            imgSquare.src = progressEvent.target.result;
                        } else {
                            imgCircle.src = progressEvent.target.result;
                        }
                    };
                    reader.readAsDataURL(file);
                }
            }
            evt.preventDefault();
        }, false);

    </script>
    <br>
    by <a href="http://twitter.com/richy486">richy486</a>
    <br>Using <a href="https://placekitten.com/">placekitten</a>


  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}
	</style>
	</head>
	<body>
	<canvas id="myCanvas" width="578" height="400"></canvas>
	<script>
	var images = {};

	function loadImages(sources, callback) {

	var loadedImages = 0;
	var numImages = 0;
	// get num of sources
	for(var src in sources) {
	numImages++;
	}
	for(var src in sources) {
	images[src] = new Image();
	images[src].onload = function() {
	if(++loadedImages >= numImages) {
	callback(images);
	}
	};
	images[src].src = sources[src];
	}
	}
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');


	var sources = {
	square: 'http://placekitten.com/g/578/400',
	circle: 'http://placekitten.com/g/230/230'
	};

	function displayImages(images) {

	// context.drawImage(images.circle, 0, 0);
	context.save();
	context.drawImage(images.square,0,0,images.square.width,images.square.height,0,0,canvas.width,canvas.height)

	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var radius = canvas.height * 0.4;
	context.beginPath();
	context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
	context.clip();
	// context.drawImage(images.square, 0, 0);
	context.drawImage(images.circle,0,0,images.circle.width,images.circle.height,0,0,canvas.width,canvas.height)
	context.restore();
	}

	loadImages(sources, displayImages);

	function handleDrop(e) {
	e.stopPropagation(); // Stops some browsers from redirecting.
	e.preventDefault();

	var files = e.dataTransfer.files;
	for (var i = 0, f; f = files[i]; i++) {
	// Read the File objects in this FileList.
	}
	}




	var mouseDown = false,
	brushColor = "rgb(0, 0, 0)",
	hasText = true,
	clearCanvas = function () {
	if (hasText) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	hasText = false;
	}
	};

	// Image for loading
	var imgSquare = document.createElement("img");
	imgSquare.addEventListener("load", function () {
	clearCanvas();
	images.square = imgSquare;
	displayImages(images);
	}, false);

	var imgCircle = document.createElement("img");
	imgCircle.addEventListener("load", function () {
	clearCanvas();
	// context.drawImage(img, 0, 0);
	// sources.square = img.src;
	images.circle = imgCircle;
	displayImages(images);
	}, false);


	// To enable drag and drop
	canvas.addEventListener("dragover", function (evt) {
	evt.preventDefault();
	}, false);

	// Handle dropped image file - only Firefox and Google Chrome
	canvas.addEventListener("drop", function (evt) {
	var files = evt.dataTransfer.files;
	if (files.length > 0) {
	var file = files[0];
	if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
	var reader = new FileReader();
	// Note: addEventListener doesn't work in Google Chrome for this event
	reader.onload = function (progressEvent) {


	var centerX = canvas.width / 2;
	var centerY = canvas.height / 2;
	var dx = evt.clientX - centerX;
	var dy = evt.clientY - centerY;
	var distance = Math.sqrt(dx * dx + dy * dy);

	console.log("evt : " + evt);
	console.log(distance + " / " + (canvas.height * 0.4));

	if (distance > canvas.height * 0.4) {
	imgSquare.src = progressEvent.target.result;
	} else {
	imgCircle.src = progressEvent.target.result;
	}
	};
	reader.readAsDataURL(file);
	}
	}
	evt.preventDefault();
	}, false);

	</script>
	<br>
	by <a href="http://twitter.com/richy486">richy486</a>
	<br>Using <a href="https://placekitten.com/">placekitten</a>



	</body>
	</html>