jyhsu2000/Image_drawing_with_canvas.html

## Image_drawing_with_canvas.html
<!DOCTYPE html>
<html>

<head>
    <title>Image drawing with canvas</title>
</head>

<body>
    <input type="file" name="fileChooser" id="fileChooser" accept="image/jpeg"><br />
    <canvas width="400" height="300" id="canvas" />
    <script type="text/javascript">
        var fileChooser = document.getElementById('fileChooser');
        fileChooser.addEventListener('change', handleFiles);

        function handleFiles(e) {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.src = URL.createObjectURL(e.target.files[0]);
            img.onload = function () {
                canvas.width = this.width;
                canvas.height = this.height;
                ctx.drawImage(img, 0, 0);
            }
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Image drawing with canvas</title>
	</head>

	<body>
	<input type="file" name="fileChooser" id="fileChooser" accept="image/jpeg"><br />
	<canvas width="400" height="300" id="canvas" />
	<script type="text/javascript">
	var fileChooser = document.getElementById('fileChooser');
	fileChooser.addEventListener('change', handleFiles);

	function handleFiles(e) {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');
	var img = new Image;
	img.src = URL.createObjectURL(e.target.files[0]);
	img.onload = function () {
	canvas.width = this.width;
	canvas.height = this.height;
	ctx.drawImage(img, 0, 0);
	}
	}
	</script>
	</body>

	</html>