import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';const c1 = scrawl.findCanvas('hackney'),
c2 = scrawl.findCanvas('heathrow'),
c3 = scrawl.findCanvas('kingston'),
c4 = scrawl.findCanvas('burglary');Namespacing boilerplate
const namespace = 'demo-canvas-018';
const name = (n) => `${namespace}-${n}`;Import the images we defined in the DOM (in <img> elements)
scrawl.importDomImage('.places');For this scene, we’ll build a data structure which we can iterate over, to build the entitys, assets and gradients required by the scene
const data = [
{
canvas: c1,
image: 'hackney-bg',
transparency: 'transparent',
},
{
canvas: c2,
image: 'heathrow-bg',
transparency: 'rgb(0 0 0 / 0)',
},
{
canvas: c3,
image: 'kingston-bg',
transparency: '#00000000',
},
{
canvas: c4,
image: 'burglary-bg',
transparency: '#0000',
},
];This array will hold a set of functions which we will invoke in turn at the start of each Display cycle
const checkFunctions = [];The blur filter is temporary - we use it once on each image to generate a blurred version of that image
scrawl.makeFilter({
name: name('blur'),
method: 'gaussianBlur',
radius: 20,
});Iterate through our data array to create Scrawl-canvas objects
data.forEach(scene => {The original picture, with the blur filter applied to it
const entity = scrawl.makePicture({
name: name(`${scene.image}-original`),
group: scene.canvas.base.name,
asset: scene.image,
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
filters: [name('blur')],
method: 'fill',
});A one-off instruction to tell Scrawl-canvas to create an image asset from our Picture entity the next time it performs a Display cycle
scrawl.createImageFromEntity(entity, true);The purpose of this demo is to test the various ways we can define ‘transparency’ in Scrawl-canvas Color objects and Gradients - tests a set of Color factory bugs uncovered and fixed in v8.3.2
scrawl.makeRadialGradient({
name: name(`${scene.image}-gradient`),
start: ['50%', '50%'],
end: ['50%', '50%'],
startRadius: '5%',
endRadius: '20%',
colors: [
[0, scene.transparency],
[999, 'black']
],
});Apply the gradient to the scene via a Block entity
const filterBlock = scrawl.makeBlock({
name: name(`${scene.image}-block`),
group: scene.canvas.base.name,
start: ['center', 'center'],
handle: ['center', 'center'],
dimensions: ['200%', '200%'],
fillStyle: name(`${scene.image}-gradient`),
lockFillStyleToEntity: true,
});Check whether the mouse cursor is hovering over this canvas, and update the filter Block entity’s positioning accordingly
const f = () => {
const here = scene.canvas.here,
block = filterBlock;
return function () {
block.set({
lockTo: (here.active) ? 'mouse' : 'start',
});
}
};
checkFunctions.push(f());
});This function will run once, at the end of the first Display cycle
const postInitialization = (anim) => {
console.log(anim.target.name, 'postInitialization');
const original = scrawl.findEntity(name(`${anim.target.name}-bg-original`));Update our original Picture entity, in particular to remove the blur filter and set up its composition in the scene
original.set({
filters: [],
order: 2,
globalCompositeOperation: 'destination-over',
});Create a second Picture entity using the blurred image asset Scrawl-canvas created for us during the first iteration of the Display cycle.
original.clone({
name: name(`${anim.target.name}-bg-blurred`),
asset: name(`${anim.target.name}-bg-original-image`),
order: 1,
globalCompositeOperation: 'source-atop',
});
};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: [c1, c2, c3, c4],
observer: true,
afterCreated: postInitialization,
commence: () => checkFunctions.forEach(f => f()),
});
scrawl.makeRender({
name: name('speed'),
noTarget: true,
afterShow: report,
});For this demo we will suppress touchmove functionality over the canvas
scrawl.addNativeListener('touchmove', (e) => {
e.preventDefault();
e.returnValue = false;
}, [c1.domElement, c2.domElement, c3.domElement, c4.domElement]);console.log(scrawl.library);