| <html> |
| <head> |
| <style type="text/css"> |
| video { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <video id="video"> |
| <source src="resources/canvas_video.webm" type="video/webm" /> |
| </video> |
| <canvas id="videoPattern" width="100" height="100"></canvas> |
| <canvas id="imagePattern" width="100" height="100"></canvas> |
| <canvas id="canvasPattern" width="100" height="100"></canvas> |
| <script> |
| function drawPatternFromImageSourceToCanvas(canvas, imageSource, repetitionType) { |
| var canvasCtx = canvas.getContext('2d'); |
| var pattern = canvasCtx.createPattern(imageSource, repetitionType); |
| canvasCtx.fillStyle = pattern; |
| canvasCtx.fillRect(0, 0, canvas.width, canvas.height); |
| } |
| |
| function createPatternFromVideo() { |
| var canvas_video = document.getElementById('videoPattern'); |
| var video = document.getElementById('video'); |
| var videoOnPlay = function() { |
| video.removeEventListener("playing", videoOnPlay); |
| drawPatternFromImageSourceToCanvas(canvas_video, video, "no-repeat"); |
| }; |
| video.addEventListener("playing", videoOnPlay, true); |
| video.play(); |
| } |
| |
| function createPatternFromImage() { |
| var canvas_image = document.getElementById('imagePattern'); |
| var image = new Image(); |
| var imageOnLoad = function() { |
| image.removeEventListener("load", imageOnLoad); |
| drawPatternFromImageSourceToCanvas(canvas_image, image, "repeat"); |
| }; |
| image.addEventListener("load", imageOnLoad); |
| image.src = "resources/pattern.png"; |
| } |
| |
| function createPatternFromCanvas() { |
| var canvas_canvas = document.getElementById('canvasPattern'); |
| var htmlCanvas = document.createElement('canvas'); |
| htmlCanvas.width = 10; |
| htmlCanvas.height = 50; |
| var htmlCanvasCtx = htmlCanvas.getContext("2d"); |
| htmlCanvasCtx.fillStyle = "blue"; |
| htmlCanvasCtx.fillRect(0, 0, 5, 50); |
| htmlCanvasCtx.fillStyle = "red"; |
| htmlCanvasCtx.fillRect(5, 0, 10, 50); |
| drawPatternFromImageSourceToCanvas(canvas_canvas, htmlCanvas, "repeat-x"); |
| |
| } |
| |
| createPatternFromVideo(); |
| createPatternFromImage(); |
| createPatternFromCanvas(); |
| </script> |
| </body> |