# Scrawl-canvas v8 - Snippets test 004

## Snippets included in the Scrawl-canvas demo/snippets folder

### These examples are all responsive - resize the browser window to confirm.

Scrawl-canvas snippets are small pieces of code which can be imported into a <script> tag in an HTML5 document, and then applied to elements in the document. For instance:

`<script type="module"> // Add a spotlight effect to the background of an element with id="#spotlight-me" import spotlight from './snippets/spotlight-text-snippet.js'; spotlight(document.querySelector('#spotlight-me')); // Add a highlighter background effect to inline words and phrases via <span> elements // - We can customize the displayed output, making this effect's line thick and orange import wordHighlighter from './snippets/word-highlighter-snippet.js'; document.querySelectorAll('.thick-orange-highlighter').forEach(el => wordHighlighter(el, { highlightColor: 'orange', thickness: 6, })); </script>`
Ripple effect - click to see effect
Ripple effect - pick up the DOM element's background color
Ripple effect - set the DOM element and ripple colors when applying the snippet
Ripple effect - translucent DOM element border
Green box - this is the effect
Jazzy button - click to see effect
Pick up element's font
Spotlight effect - hover to see effect
Spotlight effect - set the spotlight and background colors when applying the snippet
Placeholder - this is the effect
Placeholder - another example
Placeholder - pass in arguments using data attributes on the element

This is the word highlighter snippet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus nec feugiat in fermentum posuere urna nec.

Snippets won't work on inline elements. They need elements that have a blocky type of display. For example, the previous <em> element displays as "inline-block".

Fames ac turpis animated hover gradient snippet. Odio eu feugiat pretium nibh ipsum consequat. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra.

Fames ac turpis animated word gradient snippet. Odio eu feugiat canvas text is never as good as DOM text. Vitae but at least this text can still be copied and pasted! Commodo viverra.

#### Images and forms

Scrawl-canvas snippets work by inserting a <canvas> element between the opening and closing tags of the element they are applied to. Thus Scrawl-canvas snippets cannot be applied to empty elements such as <img> or <input>.

What we can do, instead, is build snippets that can be applied to the parent element. For instance the snippets used below are applied to <div> elements which contain <img> elements. When they run on the <div> element they process and import all the images into Scrawl-canvas, then display them in various ways in the <canvas> element that they add to the <div> element:

`<script type="module"> import panImage from './snippets/pan-image-snippet.js'; document.querySelectorAll('.pan-image').forEach(el => panImage(el)); </script>`

This simple image is draggable

This responsive image is draggable

When it comes to forms, and elements such as <input>, <select>, and <textarea>, the best approach is to style the elements using CSS or - if absolutely necessary - SVG. There's plenty of libraries out there in the wild that have already done the hard work for you. Adding any sort of canvas-based embellishments and replacements to a form will (probably) make the form more distracting, less useful and (almost certainly) less accessible!

Finally, remember: Scrawl-canvas snippets that do not add a <canvas> element to the DOM can also be written, such as this page performance snippet:

Page performance - this text will be overwritten by the effect

#### Test purpose

- This is not a test, just a reference page

Annotated code

- Animated hover gradient snippet
- Animated word gradient snippet
- Green box snippet
- Jazzy button snippet
- Page performance snippet
- Pan image snippet
- Placeholder effect snippet
- Ripple effect snippet
- Spotlight effect snippet
- Word highlighter snippet