import * as scrawl from '../../source/scrawl.js';Snippets included in the Scrawl-canvas demo/snippets folder
Related files:
Purpose: adds highlighting to specified words.
Function input:
Function output: a Javascript object will be returned, containing the following attributes
{
element // the Scrawl-canvas wrapper for the DOM element supplied to the function
canvas // the Scrawl-canvas wrapper for the snippet's canvas
animation // the Scrawl-canvas animation object
demolish // remove the snippet from the Scrawl-canvas library
}
import highlightText from './relative/or/absolute/path/to/this/file.js';
let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => highlightText(el));
Import the Scrawl-canvas object
import * as scrawl from '../../source/scrawl.js';Effects on the element:
export default function (el, args = {}) {The snippet will accept an optional key:value Object as the second argument
red let highlightColor = args.highlightColor || 'red',
thickness = args.thickness || 3;Apply the snippet to the DOM element
let snippet = scrawl.makeSnippet({
domElement: el,
});
if (snippet) {Set some convenience variables
let canvas = snippet.canvas,
group = canvas.base.name,
wrapper = snippet.element,
name = wrapper.name;
scrawl.makeBlock({
name: `${name}-pin1`,
group,
dimensions: [0, 0],
method: 'none',
start: ['5%', '10%'],
}).clone({
name: `${name}-pin2`,
start: ['90%', '40%'],
}).clone({
name: `${name}-pin3`,
start: ['10%', '70%'],
}).clone({
name: `${name}-pin4`,
start: ['95%', '90%'],
})Define the block which will (sometimes) display our spotlingt gradient
scrawl.makePolyline({
name: `${name}-highlight`,
group,
pins: [`${name}-pin1`, `${name}-pin2`, `${name}-pin3`, `${name}-pin4`],
tension: 0.4,
strokeStyle: highlightColor,
lineWidth: thickness,
lineCap: 'round',
lineJoin: 'round',
method: 'draw',
});
}Return the snippet, so coders can access the snippet’s parts - in case they need to tweak the output to meet the web page’s specific requirements
return snippet;
};