<div class="container">
<div class="column">
<img id="SourceImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Brill_windmill_April_2017.jpg/317px-Brill_windmill_April_2017.jpg" crossorigin="Anonymous">
</div>
<div class="column">
<div class="canvas">
<canvas id="Canvas"></canvas>
</div>
</div>
</div>
<button id="PaintButton">Paint</button>
<button id="EffectButton">Invert Colors</button>
.container {
display: flex;
width: 400px;
.column {
max-width: 100%;
flex: 0 0 400px;
}
img, canvas {
max-width: 100%;
}
canvas {
border: 1px solid #ccc;
}
}
.video-container {
width: 400px;
}
View Compiled
var effectButton;
var paintButton;
var canvas;
var context;
function init() {
effectButton = document.getElementById('EffectButton');
paintButton = document.getElementById('PaintButton');
canvas = document.getElementById('Canvas');
context = canvas.getContext('2d');
var image = document.getElementById('SourceImage');
// Set the canvas the same width and height of the image
canvas.width = image.width;
canvas.height = image.height;
paintButton.addEventListener('click', function () {
drawImage(image);
// Or
// var image = new Image();
// image.onload = function () {
// drawImage(image);
// }
// image.src = 'image.jpg';
});
effectButton.addEventListener('click', onClick);
}
function drawImage(image) {
context.drawImage(image, 0, 0);
}
function onClick() {
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
invertColors(imageData.data);
context.putImageData(imageData, 0, 0);
}
function invertColors(data) {
for (var i = 0; i < data.length; i+= 4) {
data[i] = data[i] ^ 255;
data[i+1] = data[i+1] ^ 255;
data[i+2] = data[i+2] ^ 255;
}
}
window.addEventListener('load', init);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.