| OLD | NEW |
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <style type="text/css"> |
| 4 video { |
| 5 display: none; |
| 6 } |
| 7 </style> |
| 8 </head> |
| 9 <body> |
| 10 <video id="video"> |
| 11 <source src="resources/canvas_video.webm" type="video/webm" /> |
| 12 </video> |
| 13 <canvas id="videoPattern" width="100" height="100"></canvas> |
| 14 <canvas id="imagePattern" width="100" height="100"></canvas> |
| 15 <canvas id="canvasPattern" width="100" height="100"></canvas> |
| 16 <script> |
| 17 function drawPatternFromImageSourceToCanvas(canvas, imageSource, repetitionType)
{ |
| 18 var canvasCtx = canvas.getContext('2d'); |
| 19 var pattern = canvasCtx.createPattern(imageSource, repetitionType); |
| 20 canvasCtx.fillStyle = pattern; |
| 21 canvasCtx.fillRect(0, 0, canvas.width, canvas.height); |
| 22 } |
| 23 |
| 24 function createPatternFromVideo() { |
| 25 var canvas_video = document.getElementById('videoPattern'); |
| 26 var video = document.getElementById('video'); |
| 27 var videoOnPlay = function() { |
| 28 video.removeEventListener("playing", videoOnPlay); |
| 29 drawPatternFromImageSourceToCanvas(canvas_video, video, "no-repeat"); |
| 30 }; |
| 31 video.addEventListener("playing", videoOnPlay, true); |
| 32 video.play(); |
| 33 } |
| 34 |
| 35 function createPatternFromImage() { |
| 36 var canvas_image = document.getElementById('imagePattern'); |
| 37 var image = new Image(); |
| 38 var imageOnLoad = function() { |
| 39 image.removeEventListener("load", imageOnLoad); |
| 40 drawPatternFromImageSourceToCanvas(canvas_image, image, "repeat"); |
| 41 }; |
| 42 image.addEventListener("load", imageOnLoad); |
| 43 image.src = "resources/pattern.png"; |
| 44 } |
| 45 |
| 46 function createPatternFromCanvas() { |
| 47 var canvas_canvas = document.getElementById('canvasPattern'); |
| 48 var htmlCanvas = document.createElement('canvas'); |
| 49 htmlCanvas.width = 10; |
| 50 htmlCanvas.height = 50; |
| 51 var htmlCanvasCtx = htmlCanvas.getContext("2d"); |
| 52 htmlCanvasCtx.fillStyle = "blue"; |
| 53 htmlCanvasCtx.fillRect(0, 0, 5, 50); |
| 54 htmlCanvasCtx.fillStyle = "red"; |
| 55 htmlCanvasCtx.fillRect(5, 0, 10, 50); |
| 56 drawPatternFromImageSourceToCanvas(canvas_canvas, htmlCanvas, "repeat-x"); |
| 57 |
| 58 } |
| 59 |
| 60 createPatternFromVideo(); |
| 61 createPatternFromImage(); |
| 62 createPatternFromCanvas(); |
| 63 </script> |
| 64 </body> |
| OLD | NEW |