<div class="container">
<img id="SourceImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Brill_windmill_April_2017.jpg/635px-Brill_windmill_April_2017.jpg">
<div class="video-container">
<canvas id="Canvas" class="video"></canvas>
</div>
</div>
<button id="PaintButton">Paint Canvas</button>
.container {
display: flex;
}
.video-container {
width: 400px;
video, canvas {
max-width: 100%;
}
}
View Compiled
var canvas;
var context;
var paintButton;
function init() {
var image = document.getElementById('SourceImage');
paintButton = document.getElementById('PaintButton');
canvas = document.getElementById('Canvas');
context = canvas.getContext('2d');
paintButton.addEventListener('click', function () {
drawImage(image);
// Or
// var image = new Image();
// image.onload = function () {
// drawImage(image);
// }
// image.src = 'image.jpg';
});
}
function drawImage(image) {
// Set the canvas the same width and height of the image
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
}
window.addEventListener('load', init);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.