prof3ssorSt3v3/canvas-images.html

## canvas-images.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Images</title>
    <style>
        #canvas{
            border: 1px solid #999;
            margin: 1rem auto;
            display: block;
        }
        img{
            width: 80%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <img src="./unsplash-5.jpeg" alt="Sample image https://unsplash.com/photos/PNKwdJ8WetM"/>

    <script>
        let canvas, ctx;

        document.addEventListener('DOMContentLoaded', (ev)=>{
            canvas = document.getElementById('canvas');
            ctx = canvas.getContext('2d');
            canvas.width = 600;
            canvas.height = 400;

            let imgObj = new Image();

            imgObj.onload = function() {
                let w = canvas.width;
                let nw = imgObj.naturalWidth;   //1350
                let nh = imgObj.naturalHeight;  //900
                let aspect = nw / nh;
                let h = w / aspect;
                console.log('height', h)
                canvas.height = h;
                ctx.drawImage(imgObj, 0, 0, w, h);
                //ctx.drawImage(imgObj, dx, dy);
                //ctx.drawImage(imgObj, dx, dy, dw, dh);
                //ctx.drawImage(imgObj, sx, sy, sw, sh, dx, dy, dw, dh);
            };

            imgObj.src = './unsplash-5.jpeg';

            //canvas.addEventListener('click', greyscale);
            canvas.addEventListener('click', colorChannel);
        });

        const greyscale = function(ev){
            imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            let arr = imgData.data;
            for(let i=0; i<arr.length; i=i+4){
                let ttl = arr[i] + arr[i+1] + arr[i+2];
                let avg = parseInt(ttl/3);
                arr[i] = avg;   //red
                arr[i+1] = avg; //green
                arr[i+2] = avg; //blue
            }
            imgData.data = arr;
            ctx.putImageData(imgData, 0, 0);
        }

        const colorChannel = function(ev){
            imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            let arr = imgData.data;
            for(let i=0; i<arr.length; i=i+4){
                arr[i] = 0;     //R
                //arr[i+1] = 0;   //G
                arr[i+2] = 0;   //B
            }
            imgData.data = arr;
            ctx.putImageData(imgData, 0, 0);

            let img = canvas.toDataURL('image/jpeg', 1.0);
            console.log(img);
            document.querySelector('img').src = img;
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Canvas Images</title>
	<style>
	#canvas{
	border: 1px solid #999;
	margin: 1rem auto;
	display: block;
	}
	img{
	width: 80%;
	}
	</style>
	</head>
	<body>
	<canvas id="canvas"></canvas>

	<img src="./unsplash-5.jpeg" alt="Sample image https://unsplash.com/photos/PNKwdJ8WetM"/>

	<script>
	let canvas, ctx;

	document.addEventListener('DOMContentLoaded', (ev)=>{
	canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	canvas.width = 600;
	canvas.height = 400;

	let imgObj = new Image();

	imgObj.onload = function() {
	let w = canvas.width;
	let nw = imgObj.naturalWidth; //1350
	let nh = imgObj.naturalHeight; //900
	let aspect = nw / nh;
	let h = w / aspect;
	console.log('height', h)
	canvas.height = h;
	ctx.drawImage(imgObj, 0, 0, w, h);
	//ctx.drawImage(imgObj, dx, dy);
	//ctx.drawImage(imgObj, dx, dy, dw, dh);
	//ctx.drawImage(imgObj, sx, sy, sw, sh, dx, dy, dw, dh);
	};

	imgObj.src = './unsplash-5.jpeg';

	//canvas.addEventListener('click', greyscale);
	canvas.addEventListener('click', colorChannel);
	});

	const greyscale = function(ev){
	imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let arr = imgData.data;
	for(let i=0; i<arr.length; i=i+4){
	let ttl = arr[i] + arr[i+1] + arr[i+2];
	let avg = parseInt(ttl/3);
	arr[i] = avg; //red
	arr[i+1] = avg; //green
	arr[i+2] = avg; //blue
	}
	imgData.data = arr;
	ctx.putImageData(imgData, 0, 0);
	}

	const colorChannel = function(ev){
	imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
	let arr = imgData.data;
	for(let i=0; i<arr.length; i=i+4){
	arr[i] = 0; //R
	//arr[i+1] = 0; //G
	arr[i+2] = 0; //B
	}
	imgData.data = arr;
	ctx.putImageData(imgData, 0, 0);

	let img = canvas.toDataURL('image/jpeg', 1.0);
	console.log(img);
	document.querySelector('img').src = img;
	}
	</script>
	</body>
	</html>