import * as scrawl from '../source/scrawl.js';
import { reportSpeed, addImageDragAndDrop } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed, addImageDragAndDrop } from './utilities.js';const canvas = scrawl.findCanvas('mycanvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;Import the initial image used by the Picture entity
scrawl.importDomImage('.flowers');Create the target entitys
const piccy = scrawl.makePicture({
name: name('image'),
asset: 'iris',
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
});
const text = scrawl.makeLabel({
name: name('demo-text'),
text: 'Hello world',
fontString: 'bold 70px sans-serif',
start: ['center', 'center'],
handle: ['center', 'center'],
fillStyle: 'aliceblue',
strokeStyle: 'red',
lineWidth: 3,
method: 'fillThenDraw',
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,
});No additional work required in the Javascript file to create the CSS filters; these are defined as Strings in the HTML select <option> elements, and will be set on the target entitys as part of the form control user interaction below.
<select class="controlItem" id="filter">
<option value="none">none</option>
<option value="blur(6px)">blur(6px)</option>
<option value="brightness(0.4)">brightness(0.4)</option>
<option value="contrast(200%)">contrast(200%)</option>
<option value="drop-shadow(4px 4px 4px blue)">drop-shadow(4px 4px 4px blue)</option>
<option value="grayscale(100%)">grayscale(100%)</option>
<option value="hue-rotate(90deg)">hue-rotate(90deg)</option>
<option value="invert(75%)">invert(75%)</option>
<option value="opacity(25%)">opacity(25%)</option>
<option value="saturate(30%)">saturate(30%)</option>
<option value="sepia(100%)">sepia(100%)</option>
</select>
let filterTarget = piccy,
filterString = 'none';Setup form
scrawl.initializeDomInputs([
['select', 'filter', 0],
['select', 'target', 0],
]);
const updateTarget = (e) => {
e.preventDefault();
e.returnValue = false;
const val = e.target.value;
if (val) {
piccy.set({ filter: 'none'});
text.set({ filter: 'none'});
canvas.setBase({ filter: 'none'});
if (val === 'picture') filterTarget = piccy;
/** @ts-expect-error */
else if (val === 'label') filterTarget = text;
/** @ts-expect-error */
else if (val === 'cell') filterTarget = canvas.getBase();
filterTarget.set({ filter: filterString });
}
};
scrawl.addNativeListener(['input', 'change'], updateTarget, '#target');
const updateFilter = (e) => {
e.preventDefault();
e.returnValue = false;
if (e.target && e.target.value) {
filterString = e.target.value;
filterTarget.set({ filter: filterString });
}
};
scrawl.addNativeListener(['input', 'change'], updateFilter, '#filter');addImageDragAndDrop(scrawl, canvas, `#${namespace} .assets`, piccy);console.log(scrawl.library);