This simple image is draggable
This responsive image is draggable
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>
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.
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: