jake-sl/index.html

## index.html
<body>
    <input type="file" id="image-input" accept="image/*">
    <input type="file" id="shadow-input" accept="image/*">
    <label for="color1">Color 1:</label>
    <input type="color" id="color1" value="#000000">
    <label for="color2">Color 2:</label>
    <input type="color" id="color2" value="#ffffff">
    <label for="bg-color">Background Color:</label>
    <input type="color" id="bg-color" value="#ffffff">
    <canvas id="image-canvas"></canvas>
    <button id="clear-shadow-btn">Clear Shadow</button>
    <script src="main.js"></script>
</body>

## script.js
const imageInput = document.getElementById('image-input');
const shadowInput = document.getElementById('shadow-input');
const color1 = document.getElementById('color1');
const color2 = document.getElementById('color2');
const bgColor = document.getElementById('bg-color');
const canvas = document.getElementById('image-canvas');
const ctx = canvas.getContext('2d');
let img = new Image();
let shadowImg = new Image();
const clearShadowBtn = document.getElementById('clear-shadow-btn');

imageInput.addEventListener('change', e => {
    const reader = new FileReader();
    reader.onload = event => {
        img.src = event.target.result;
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            updateImage();
        };
    };
    reader.readAsDataURL(e.target.files[0]);
});

shadowInput.addEventListener('change', e => {
    const reader = new FileReader();
    reader.onload = event => {
        shadowImg.src = event.target.result;
        shadowImg.onload = () => {
            updateImage();
        };
    };
    reader.readAsDataURL(e.target.files[0]);
});

clearShadowBtn.addEventListener('click', () => {
    shadowImg.src = '';
    updateImage();
});

function updateImage() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the image in grayscale
    ctx.filter = 'grayscale(100%)';
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    ctx.filter = 'none';

    // Draw the color gradient onto a temporary canvas
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    const tempCtx = tempCanvas.getContext('2d');
    const gradient = tempCtx.createLinearGradient(0, 0, canvas.width, canvas.height);
    gradient.addColorStop(0, color1.value);
    gradient.addColorStop(1, color2.value);
    tempCtx.fillStyle = gradient;
    tempCtx.fillRect(0, 0, canvas.width, canvas.height);

    // Use the source-atop composite operation to only draw the gradient where the grayscale image is opaque
    ctx.globalCompositeOperation = 'source-atop';
    ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);

    // Reset the composite operation
    ctx.globalCompositeOperation = 'source-over';

    // Draw the shadow image on top with blend mode set to screen
    if (shadowImg.src !== '') {
        ctx.globalCompositeOperation = 'multiply';
        ctx.drawImage(shadowImg, 0, 0, canvas.width, canvas.height);
        ctx.globalCompositeOperation = 'source-over';
    }
}

function updateBackground() {
    canvas.style.backgroundColor = bgColor.value;
}

color1.addEventListener('input', updateImage);
color2.addEventListener('input', updateImage);
bgColor.addEventListener('input', updateBackground);

## vyvgyyo.markdown

      
    Raw
  

              vyvgyyo.markdown
            
          
    vYVGyyo

A Pen by Jake Brown on CodePen.
License.
	<body>
	<input type="file" id="image-input" accept="image/*">
	<input type="file" id="shadow-input" accept="image/*">
	<label for="color1">Color 1:</label>
	<input type="color" id="color1" value="#000000">
	<label for="color2">Color 2:</label>
	<input type="color" id="color2" value="#ffffff">
	<label for="bg-color">Background Color:</label>
	<input type="color" id="bg-color" value="#ffffff">
	<canvas id="image-canvas"></canvas>
	<button id="clear-shadow-btn">Clear Shadow</button>
	<script src="main.js"></script>
	</body>
	const imageInput = document.getElementById('image-input');
	const shadowInput = document.getElementById('shadow-input');
	const color1 = document.getElementById('color1');
	const color2 = document.getElementById('color2');
	const bgColor = document.getElementById('bg-color');
	const canvas = document.getElementById('image-canvas');
	const ctx = canvas.getContext('2d');
	let img = new Image();
	let shadowImg = new Image();
	const clearShadowBtn = document.getElementById('clear-shadow-btn');

	imageInput.addEventListener('change', e => {
	const reader = new FileReader();
	reader.onload = event => {
	img.src = event.target.result;
	img.onload = () => {
	canvas.width = img.width;
	canvas.height = img.height;
	updateImage();
	};
	};
	reader.readAsDataURL(e.target.files[0]);
	});

	shadowInput.addEventListener('change', e => {
	const reader = new FileReader();
	reader.onload = event => {
	shadowImg.src = event.target.result;
	shadowImg.onload = () => {
	updateImage();
	};
	};
	reader.readAsDataURL(e.target.files[0]);
	});

	clearShadowBtn.addEventListener('click', () => {
	shadowImg.src = '';
	updateImage();
	});

	function updateImage() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw the image in grayscale
	ctx.filter = 'grayscale(100%)';
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	ctx.filter = 'none';

	// Draw the color gradient onto a temporary canvas
	const tempCanvas = document.createElement('canvas');
	tempCanvas.width = canvas.width;
	tempCanvas.height = canvas.height;
	const tempCtx = tempCanvas.getContext('2d');
	const gradient = tempCtx.createLinearGradient(0, 0, canvas.width, canvas.height);
	gradient.addColorStop(0, color1.value);
	gradient.addColorStop(1, color2.value);
	tempCtx.fillStyle = gradient;
	tempCtx.fillRect(0, 0, canvas.width, canvas.height);

	// Use the source-atop composite operation to only draw the gradient where the grayscale image is opaque
	ctx.globalCompositeOperation = 'source-atop';
	ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);

	// Reset the composite operation
	ctx.globalCompositeOperation = 'source-over';

	// Draw the shadow image on top with blend mode set to screen
	if (shadowImg.src !== '') {
	ctx.globalCompositeOperation = 'multiply';
	ctx.drawImage(shadowImg, 0, 0, canvas.width, canvas.height);
	ctx.globalCompositeOperation = 'source-over';
	}
	}

	function updateBackground() {
	canvas.style.backgroundColor = bgColor.value;
	}

	color1.addEventListener('input', updateImage);
	color2.addEventListener('input', updateImage);
	bgColor.addEventListener('input', updateBackground);