1*c8dee2aaSAndroid Build Coastguard Worker<!DOCTYPE html> 2*c8dee2aaSAndroid Build Coastguard Worker<title>Texture demos</title> 3*c8dee2aaSAndroid Build Coastguard Worker<meta charset="utf-8" /> 4*c8dee2aaSAndroid Build Coastguard Worker<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5*c8dee2aaSAndroid Build Coastguard Worker<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6*c8dee2aaSAndroid Build Coastguard Worker<script type="text/javascript" src="https://unpkg.com/[email protected]/bin/full/canvaskit.js"></script> 7*c8dee2aaSAndroid Build Coastguard Worker 8*c8dee2aaSAndroid Build Coastguard Worker<style> 9*c8dee2aaSAndroid Build Coastguard Worker canvas { 10*c8dee2aaSAndroid Build Coastguard Worker border: 1px dashed grey; 11*c8dee2aaSAndroid Build Coastguard Worker } 12*c8dee2aaSAndroid Build Coastguard Worker #sourceImage, #sourceVideo { 13*c8dee2aaSAndroid Build Coastguard Worker width: 100px; 14*c8dee2aaSAndroid Build Coastguard Worker height: 100px; 15*c8dee2aaSAndroid Build Coastguard Worker border: 1px solid red; 16*c8dee2aaSAndroid Build Coastguard Worker cursor: pointer; 17*c8dee2aaSAndroid Build Coastguard Worker } 18*c8dee2aaSAndroid Build Coastguard Worker</style> 19*c8dee2aaSAndroid Build Coastguard Worker 20*c8dee2aaSAndroid Build Coastguard Worker<body> 21*c8dee2aaSAndroid Build Coastguard Worker <h1>User Defined Textures</h1> 22*c8dee2aaSAndroid Build Coastguard Worker 23*c8dee2aaSAndroid Build Coastguard Worker <p>Tap on one of the texture sources to switch to it.</p> 24*c8dee2aaSAndroid Build Coastguard Worker 25*c8dee2aaSAndroid Build Coastguard Worker <canvas id=draw width=500 height=500></canvas> 26*c8dee2aaSAndroid Build Coastguard Worker 27*c8dee2aaSAndroid Build Coastguard Worker <img id="sourceImage" src="testimg.png"> 28*c8dee2aaSAndroid Build Coastguard Worker <video id="sourceVideo" autoplay muted></video> 29*c8dee2aaSAndroid Build Coastguard Worker</body> 30*c8dee2aaSAndroid Build Coastguard Worker 31*c8dee2aaSAndroid Build Coastguard Worker<script type="text/javascript" charset="utf-8"> 32*c8dee2aaSAndroid Build Coastguard Worker const ckLoaded = CanvasKitInit({ locateFile: (file) => 'https://unpkg.com/[email protected]/bin/full/' + file }); 33*c8dee2aaSAndroid Build Coastguard Worker const canvasEle = document.getElementById('draw'); 34*c8dee2aaSAndroid Build Coastguard Worker const imgEle = document.getElementById('sourceImage'); 35*c8dee2aaSAndroid Build Coastguard Worker const videoEle = document.getElementById('sourceVideo'); 36*c8dee2aaSAndroid Build Coastguard Worker 37*c8dee2aaSAndroid Build Coastguard Worker // Links the web cam to the video element. 38*c8dee2aaSAndroid Build Coastguard Worker navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { 39*c8dee2aaSAndroid Build Coastguard Worker videoEle.srcObject = stream; 40*c8dee2aaSAndroid Build Coastguard Worker }).catch((err) => { 41*c8dee2aaSAndroid Build Coastguard Worker console.error("Could not set up video", err); 42*c8dee2aaSAndroid Build Coastguard Worker }); 43*c8dee2aaSAndroid Build Coastguard Worker 44*c8dee2aaSAndroid Build Coastguard Worker // Enables switching between texture sources. 45*c8dee2aaSAndroid Build Coastguard Worker let srcEle = imgEle; 46*c8dee2aaSAndroid Build Coastguard Worker imgEle.addEventListener('click', () => { 47*c8dee2aaSAndroid Build Coastguard Worker srcEle = imgEle; 48*c8dee2aaSAndroid Build Coastguard Worker }); 49*c8dee2aaSAndroid Build Coastguard Worker videoEle.addEventListener('click', () => { 50*c8dee2aaSAndroid Build Coastguard Worker srcEle = videoEle; 51*c8dee2aaSAndroid Build Coastguard Worker }); 52*c8dee2aaSAndroid Build Coastguard Worker 53*c8dee2aaSAndroid Build Coastguard Worker Promise.all([ 54*c8dee2aaSAndroid Build Coastguard Worker ckLoaded, 55*c8dee2aaSAndroid Build Coastguard Worker imgEle.decode(), 56*c8dee2aaSAndroid Build Coastguard Worker]).then(([ 57*c8dee2aaSAndroid Build Coastguard Worker CanvasKit, 58*c8dee2aaSAndroid Build Coastguard Worker shouldBeNull, 59*c8dee2aaSAndroid Build Coastguard Worker]) => { 60*c8dee2aaSAndroid Build Coastguard Worker const surface = CanvasKit.MakeCanvasSurface('draw'); 61*c8dee2aaSAndroid Build Coastguard Worker if (!surface) { 62*c8dee2aaSAndroid Build Coastguard Worker throw 'Could not make surface'; 63*c8dee2aaSAndroid Build Coastguard Worker } 64*c8dee2aaSAndroid Build Coastguard Worker const paint = new CanvasKit.Paint(); 65*c8dee2aaSAndroid Build Coastguard Worker // This image will have its underlying texture re-used once per frame. 66*c8dee2aaSAndroid Build Coastguard Worker const img = surface.makeImageFromTextureSource(srcEle); 67*c8dee2aaSAndroid Build Coastguard Worker 68*c8dee2aaSAndroid Build Coastguard Worker let lastTS = Date.now(); 69*c8dee2aaSAndroid Build Coastguard Worker function drawFrame(canvas) { 70*c8dee2aaSAndroid Build Coastguard Worker const now = Date.now(); 71*c8dee2aaSAndroid Build Coastguard Worker canvas.rotate(10 * (now - lastTS) / 1000, 250, 250); 72*c8dee2aaSAndroid Build Coastguard Worker lastTS = now; 73*c8dee2aaSAndroid Build Coastguard Worker // Re-use the image's underlying texture, but replace the contents of the old texture 74*c8dee2aaSAndroid Build Coastguard Worker // with the contents of srcEle 75*c8dee2aaSAndroid Build Coastguard Worker surface.updateTextureFromSource(img, srcEle); 76*c8dee2aaSAndroid Build Coastguard Worker canvas.clear(CanvasKit.Color(200, 200, 200)); 77*c8dee2aaSAndroid Build Coastguard Worker canvas.drawImage(img, 5, 5, paint); 78*c8dee2aaSAndroid Build Coastguard Worker surface.requestAnimationFrame(drawFrame); 79*c8dee2aaSAndroid Build Coastguard Worker } 80*c8dee2aaSAndroid Build Coastguard Worker surface.requestAnimationFrame(drawFrame); 81*c8dee2aaSAndroid Build Coastguard Worker }); 82*c8dee2aaSAndroid Build Coastguard Worker 83*c8dee2aaSAndroid Build Coastguard Worker</script> 84
