| <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> |
| <canvas id="offscreenCanvas2DOutput" width="150" height="150"></canvas> |
| <canvas id="offscreenCanvasWebGLOutput" width="150" height="150"></canvas> |
| |
| <script> |
| function drawImageSourceToOffscreenCanvas(imageSource, outputCanvas) { |
| var aCanvas = new OffscreenCanvas(150, 150); |
| var ctx = aCanvas.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); |
| |
| var outputCanvasRenderer = outputCanvas.getContext("bitmaprenderer"); |
| outputCanvasRenderer.transferFromImageBitmap(aCanvas.transferToImageBitmap()); |
| }; |
| |
| // image source as video |
| var video = document.getElementById('video'); |
| var videoOnPlay = function() { |
| video.removeEventListener("playing", videoOnPlay); |
| drawImageSourceToOffscreenCanvas(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); |
| drawImageSourceToOffscreenCanvas(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); |
| drawImageSourceToOffscreenCanvas(htmlCanvas, document.getElementById('canvasOutput')); |
| |
| // image source as OffscreenCanvas with 2D context |
| var offscreenCanvas2D = new OffscreenCanvas(30, 30); |
| var offscreenCanvas2DCtx = offscreenCanvas2D.getContext("2d"); |
| offscreenCanvas2DCtx.fillStyle = "blue"; |
| offscreenCanvas2DCtx.fillRect(0, 0, 15, 30); |
| offscreenCanvas2DCtx.fillStyle = "red"; |
| offscreenCanvas2DCtx.fillRect(15, 0, 30, 30); |
| drawImageSourceToOffscreenCanvas(offscreenCanvas2D, document.getElementById('offscreenCanvas2DOutput')); |
| |
| // Image source as OffscreenCanvas with webGL context |
| var offscreenCanvasWebGL = new OffscreenCanvas(30, 30); |
| var gl = offscreenCanvasWebGL.getContext("webgl"); |
| gl.clearColor(0.0, 0.0, 1.0, 1.0); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| drawImageSourceToOffscreenCanvas(offscreenCanvasWebGL, document.getElementById('offscreenCanvasWebGLOutput')); |
| |
| </script> |
| </body> |
| |
