Session resources for web developers, in order of presentation from the Microsoft Build 2021 "Microsoft Edge: State of the Platform" on-demand session.
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <img | |
| src="https://3er1viui9wo30pkxh1v2nh4w-wpengine.netdna-ssl.com/wp-content/uploads/prod/2021/04/Surface-Laptop-4-4-768x576.jpg" /> | |
| <br><br> | |
| <button id="eyedropper">Pick a color</button> | |
| <br><br> | |
| <p style="font-family: sans-serif; font-size: 10pt">Selected color:</p> | |
| <div id="colorselected" style="width: 100px; height: 100px; border:1px solid black"></div> |
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <canvas id="canvas" width="320" height="200" style="border: 1px solid gray"></canvas> | |
| </body> | |
| <script> | |
| // Get Canvas and 2D Context | |
| var canvas = document.getElementById('canvas'); | |
| var context = canvas.getContext('2d'); |
| // Request a new delegated ink trail presenter | |
| let presenter = await navigator.ink.requestPresenter('delegated-ink-trail', canvas); | |
| // On pointer move, pass in a stroke style for OS to render | |
| window.addEventListener('pointermove', evt => { | |
| renderStrokeSegment(evt); | |
| let style = { color: 'rgba(0, 0, 255, 1)', diameter: 5 }; | |
| presenter.updateInkTrailStartPoint(evt, style); | |
| }); |
| /*! | |
| * Bootstrap v3.3.5 (http://getbootstrap.com) | |
| * Copyright 2011-2015 Twitter, Inc. | |
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
| *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content- |
| <!DOCTYPE html> | |
| <html class="SandboxRoot env-bp-350"> | |
| <head> | |
| <title> | |
| </title> | |
| <style> | |
| body { background-color: red; } | |
| .Icon--retweet { | |
| height: 1.25em; |