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 canvas = scrawl.findCanvas('mycanvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;Red
const outerBlock = scrawl.makeBlock({
name: name('rgb-red'),
start: ['25%', '25%'],
handle: ['center', 'center'],
dimensions: ['50%', '50%'],
fillStyle: 'rgb(255 0 0)',
});
const innerBlock = scrawl.makeBlock({
name: name('p3-red'),
pivot: name('rgb-red'),
lockTo: 'pivot',
handle: ['center', 'center'],
dimensions: ['25%', '25%'],
fillStyle: 'color(display-p3 1 0 0)',
});Green
outerBlock.clone({
name: name('rgb-green'),
start: ['75%', '25%'],
fillStyle: 'rgb(0 255 0)',
});
innerBlock.clone({
name: name('p3-green'),
pivot: name('rgb-green'),
fillStyle: 'color(display-p3 0 1 0)',
});Blue
outerBlock.clone({
name: name('rgb-blue'),
start: ['25%', '75%'],
fillStyle: 'rgb(0 0 255)',
});
innerBlock.clone({
name: name('p3-blue'),
pivot: name('rgb-blue'),
fillStyle: 'color(display-p3 0 0 1)',
});Magenta
outerBlock.clone({
name: name('rgb-magenta'),
start: ['75%', '75%'],
fillStyle: 'rgb(255 0 255)',
});
innerBlock.clone({
name: name('p3-magenta'),
pivot: name('rgb-magenta'),
fillStyle: 'color(display-p3 1 0 1)',
});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,
});console.log(scrawl.library);