scrawl-canvas

<!DOCTYPE html> <html> <head> <title>spotlight-text-snippet-test.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="../modules/canvas-minimap.html"> ./demo/modules/canvas-minimap.js </a> <a class="source" href="../modules/canvas-scene-editor.html"> ./demo/modules/canvas-scene-editor.js </a> <a class="source" href="../modules/dom-entity-editor.html"> ./demo/modules/dom-entity-editor.js </a> <a class="source" href="../modules/entity-copy-paste.html"> ./demo/modules/entity-copy-paste.js </a> <a class="source" href="../modules/entity-manipulation-gui.html"> ./demo/modules/entity-manipulation-gui.js </a> <a class="source" href="../modules/entity-navigation.html"> ./demo/modules/entity-navigation.js </a> <a class="source" href="../modules/entity-ring-builder.html"> ./demo/modules/entity-ring-builder.js </a> <a class="source" href="../modules/london-crime-graphic.html"> ./demo/modules/london-crime-graphic.js </a> <a class="source" href="../modules/london-crime-lines.html"> ./demo/modules/london-crime-lines.js </a> <a class="source" href="../modules/london-crime-stacked-bars.html"> ./demo/modules/london-crime-stacked-bars.js </a> <a class="source" href="../modules/lottie-loader.html"> ./demo/modules/lottie-loader.js </a> <a class="source" href="../modules/simple-chart-frame-tests.html"> ./demo/modules/simple-chart-frame-tests.js </a> <a class="source" href="../modules/simple-chart-frame.html"> ./demo/modules/simple-chart-frame.js </a> <a class="source" href="../modules/simple-graph-lines.html"> ./demo/modules/simple-graph-lines.js </a> <a class="source" href="../modules/simple-graph-stacked-bars.html"> ./demo/modules/simple-graph-stacked-bars.js </a> <a class="source" href="../modules/wikipedia-views-spiral-chart.html"> ./demo/modules/wikipedia-views-spiral-chart.js </a> <a class="source" href="animated-highlight-gradient-text-snippet.html"> ./demo/snippets/animated-highlight-gradient-text-snippet.js </a> <a class="source" href="animated-hover-gradient-snippet.html"> ./demo/snippets/animated-hover-gradient-snippet.js </a> <a class="source" href="animated-word-gradient-snippet.html"> ./demo/snippets/animated-word-gradient-snippet.js </a> <a class="source" href="before-after-slider-infographic.html"> ./demo/snippets/before-after-slider-infographic.js </a> <a class="source" href="bubbles-text-snippet.html"> ./demo/snippets/bubbles-text-snippet.js </a> <a class="source" href="green-box-snippet.html"> ./demo/snippets/green-box-snippet.js </a> <a class="source" href="jazzy-button-snippet.html"> ./demo/snippets/jazzy-button-snippet.js </a> <a class="source" href="page-performance-snippet-test.html"> ./demo/snippets/page-performance-snippet-test.js </a> <a class="source" href="page-performance-snippet.html"> ./demo/snippets/page-performance-snippet.js </a> <a class="source" href="pan-image-snippet.html"> ./demo/snippets/pan-image-snippet.js </a> <a class="source" href="placeholder-effect-snippet.html"> ./demo/snippets/placeholder-effect-snippet.js </a> <a class="source" href="ripple-effect-snippet.html"> ./demo/snippets/ripple-effect-snippet.js </a> <a class="source" href="risograph-text-gradient-snippet.html"> ./demo/snippets/risograph-text-gradient-snippet.js </a> <a class="source" href="spotlight-text-snippet-test.html"> ./demo/snippets/spotlight-text-snippet-test.js </a> <a class="source" href="spotlight-text-snippet.html"> ./demo/snippets/spotlight-text-snippet.js </a> <a class="source" href="swirling-stripes-text-snippet.html"> ./demo/snippets/swirling-stripes-text-snippet.js </a> <a class="source" href="text-snippet-helper.html"> ./demo/snippets/text-snippet-helper.js </a> <a class="source" href="word-highlighter-snippet.html"> ./demo/snippets/word-highlighter-snippet.js </a> <a class="source" href="worley-text-gradient-snippet.html"> ./demo/snippets/worley-text-gradient-snippet.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="title"> <div class="annotation"> <h1>spotlight-text-snippet-test.js</h1> </div> </li> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> </div> <div class="content"><div class='highlight'><pre>import * as scrawl from '../../source/scrawl.js'; export default function (el) { let snippet = scrawl.makeSnippet({ domElement: el, }); if (snippet) { let canvas = snippet.canvas, animation = snippet.animation, wrapper = snippet.element, name = wrapper.name; canvas.setAsCurrentCanvas(); let spotlightGradient = scrawl.makeRadialGradient({ name: `${name}-gradient`, startX: '50%', startY: '50%', endX: '50%', endY: '50%', endRadius: '20%', }) .updateColor(0, 'white') .updateColor(999, 'lightgray'); animation.commence = function () { let active = false; return function () { if (canvas.here.active !== active) { active = canvas.here.active; block.set({ lockTo: (active) ? 'mouse' : 'start', fillStyle: (active) ? spotlightGradient : 'lightgray', }); } }; }(); let block = scrawl.makeBlock({ name: `${name}-spotlight`, width: '200%', height: '200%', startX: "50%", startY: "50%", handleX: "50%", handleY: "50%", fillStyle: 'lightgray', lockFillStyleToEntity: true, method: 'fill', }); scrawl.makeBlock({ name: `${name}-box`, width: '50%', height: '50%', startX: '25%', startY: '25%', globalAlpha: 0.3, strokeStyle: 'lightgreen', lineWidth: 40, method: 'draw', }); } return snippet; };</pre></div></div> </li> </ul> </div> </body> </html>