import * as scrawl from '../../source/scrawl.js'Scrawl-canvas stack element snippets
Related files:
Purpose: adds a translucent green box to an element.
Function input: the DOM element, or a handle to it, as the only argument.
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
}
Usage example:
import greenBox from './relative/or/absolute/path/to/this/file.js';
let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => greenBox(el));
import * as scrawl from '../../source/scrawl.js'export default function (el) {
let snippet = scrawl.makeSnippet({
domElement: el,
});
if (snippet) {
scrawl.makeBlock({
name: `${snippet.element.name}-box`,
group: snippet.canvas.base.name,
width: '50%',
height: '50%',
startX: '25%',
startY: '25%',
globalAlpha: 0.3,
strokeStyle: 'lightgreen',
lineWidth: 40,
method: 'draw',
});
}
return snippet;
};