Using Canvas Images
We can use the contents of one canvas as the source for the drawImage method on another
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
border: thin solid black
}
body>* {
float: left;
}
</style>
</head>
<body>
<video id="vid" hidden src="yourVideo.webm" preload="auto" width="360" height="240" autoplay></video>
<canvas id="canvas" width="360" height="240">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<div>
<button id="pressme">Press Me</button>
</div>
<canvas id="canvas2" width="360" height="240">
Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var srcCanvasElement = document.getElementById("canvas");
var ctx = srcCanvasElement.getContext("2d");
var ctx2 = document.getElementById("canvas2").getContext("2d");
var imageElement = document.getElementById("vid");
document.getElementById("pressme").onclick = takeSnapshot;
var width = 100;
var height = 10;
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx2.lineWidth = 20;
ctx2.strokeStyle = "black;"
setInterval(function() {
ctx.drawImage(imageElement, 0, 0, 400, 200);
ctx.strokeRect(180 - (width / 2), 120 - (height / 2), width,height);
}, 25);
setInterval(function() {
width = (width + 1) % 20;
height = (height + 3) % 20;
}, 100);
function takeSnapshot() {
ctx2.drawImage(srcCanvasElement, 0, 0, 360, 240);
ctx2.strokeRect(0, 0, 400, 200);
}
</script>
</body>
</html>
Home
HTML CSS Book
HTML
HTML CSS Book
HTML
canvas:
- Getting Started with the Canvas Element
- Getting a Canvas Context
- Drawing Rectangles
- Canvas Drawing State
- Setting the Line Join Style
- Using Gradients
- Using Patterns
- Using smaller shapes with an image pattern
- Drawing Images
- Using Video Images
- Using Canvas Images
- Setting the Fill & Stroke Styles
- Saving and Restoring Drawing State
- Drawing Using Paths
- Drawing Arcs
- Drawing Bezier Curves
- Drawing Text
- Using Shadows
- Using Transparency
Related: