| <html> |
| <head> |
| <style type="text/css"> |
| video { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <video id="video" width="30" height="30"> |
| <source src="resources/canvas_video.webm" type="video/webm" /> |
| </video> |
| <canvas id="videoOutput" width="150" height="150"></canvas> |
| <canvas id="imageOutput" width="150" height="150"></canvas> |
| <canvas id="canvasOutput" width="150" height="150"></canvas> |
| |
| <script> |
| function drawImageSourceToHTMLCanvas(imageSource, outputCanvas) { |
| var ctx = outputCanvas.getContext('2d'); |
| |
| ctx.drawImage(imageSource, 0, 0); |
| ctx.drawImage(imageSource, 30, 30, 30, 30); |
| // stretch the image |
| ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60); |
| // reduce the image |
| ctx.drawImage(imageSource, 8, 8, 15, 15, 120, 120, 15, 15); |
| }; |
| |
| // image source as video |
| var video = document.getElementById('video'); |
| var videoOnPlay = function() { |
| video.removeEventListener("playing", videoOnPlay); |
| drawImageSourceToHTMLCanvas(video, document.getElementById('videoOutput')); |
| }; |
| video.addEventListener("playing", videoOnPlay, true); |
| video.play(); |
| |
| // image source as image |
| var image = new Image(); |
| var imageOnLoad = function() { |
| image.removeEventListener("load", imageOnLoad); |
| drawImageSourceToHTMLCanvas(image, document.getElementById('imageOutput')); |
| }; |
| image.addEventListener("load", imageOnLoad); |
| image.src = "resources/pattern.png"; |
| |
| // image source as canvas |
| var htmlCanvas = document.createElement('canvas'); |
| htmlCanvas.width = 30; |
| htmlCanvas.height = 30; |
| var htmlCanvasCtx = htmlCanvas.getContext("2d"); |
| htmlCanvasCtx.fillStyle = "blue"; |
| htmlCanvasCtx.fillRect(0, 0, 15, 30); |
| htmlCanvasCtx.fillStyle = "red"; |
| htmlCanvasCtx.fillRect(15, 0, 30, 30); |
| drawImageSourceToHTMLCanvas(htmlCanvas, document.getElementById('canvasOutput')); |
| |
| </script> |
| </body> |
| |
