Demo Canvas 007

import scrawl from '../source/scrawl.js'

let canvas = scrawl.library.artefact.mycanvas;

scrawl.importDomImage('.map');

canvas.set({
    fit: 'fill',
    backgroundColor: 'beige',
    css: {
        border: '1px solid black'
    }
});

let myGrad = scrawl.makeGradient({
    name: 'linear1',
    endX: '100%',
})
.updateColor(0, 'pink')
.updateColor(999, 'darkgreen');

myGrad.clone({
    name: 'linear2',
})
.updateColor(0, 'darkblue')
.updateColor(999, 'white');

myGrad.clone({
    name: 'linear3',
})
.updateColor(0, 'yellow')
.updateColor(999, 'purple');

myGrad.clone({
    name: 'linear4',
})
.updateColor(0, 'black')
.updateColor(999, 'coral');

let block1 = scrawl.makeBlock({
    name: 'b1',
    width: '70%',
    height: '70%',
    startX: '5%',
    startY: '5%',
    fillStyle: 'linear1',
    lockFillStyleToEntity: true,
    strokeStyle: 'coral',
    lineWidth: 4,
    method: 'fillAndDraw',
});

let block2 = block1.clone({
    name: 'b2',
    startX: '45%',
    startY: '47%',
    handleX: 'center',
    handleY: 'center',
    scale: 0.5,
    fillStyle: 'linear2',
    strokeStyle: 'red',
    delta: {
        roll: -0.5
    },
    order: 1,
});

let wheel1 = scrawl.makeWheel({
    name: 'w1',
    radius: '20%',
    startX: '70%',
    startY: '30%',
    handleX: 'center',
    handleY: 'center',
    fillStyle: 'linear3',
    lockFillStyleToEntity: true,
    strokeStyle: 'orange',
    lineWidth: 4,
    method: 'fillAndDraw',
});

let wheel2 = wheel1.clone({
    name: 'w2',
    startX: '32%',
    startY: '82%',
    handleX: '15%',
    handleY: 'center',
    scale: 0.7,
    fillStyle: 'linear4',
    strokeStyle: 'lightblue',
    delta: {
        roll: 1
    },
    order: 1,
});

scrawl.makeFilter({
    name: 'gray',
    method: 'gray',

}).clone({
    name: 'grayscale',
    method: 'grayscale',

}).clone({
    name: 'sepia',
    method: 'sepia',

}).clone({
    name: 'invert',
    method: 'invert',

}).clone({
    name: 'red',
    method: 'red',

}).clone({
    name: 'green',
    method: 'green',

}).clone({
    name: 'blue',
    method: 'blue',

}).clone({
    name: 'notred',
    method: 'notred',

}).clone({
    name: 'notgreen',
    method: 'notgreen',

}).clone({
    name: 'notblue',
    method: 'notblue',

}).clone({
    name: 'cyan',
    method: 'cyan',

}).clone({
    name: 'magenta',
    method: 'magenta',

}).clone({
    name: 'yellow',
    method: 'yellow',

}).clone({
    name: 'edgeDetect',
    method: 'edgeDetect',

}).clone({
    name: 'sharpen',
    method: 'sharpen',
});

scrawl.makeFilter({
    name: 'emboss',
    method: 'emboss',
    angle: 225,
    strength: 10,
    tolerance: 50,
});

scrawl.makeFilter({
    name: 'chroma',
    method: 'chroma',
    ranges: [[0, 0, 0, 80, 80, 80], [180, 180, 180, 255, 255, 255]],
});

scrawl.makeFilter({
    name: 'brightness',
    method: 'brightness',
    level: 0.5,

}).clone({
    name: 'saturation',
    method: 'saturation',
    level: 1.4,

}).clone({
    name: 'threshold',
    method: 'threshold',
    level: 127,
    lowRed: 100,
    lowGreen: 0,
    lowBlue: 0,
    highRed: 220,
    highGreen: 60,
    highBlue: 60,
});

scrawl.makeFilter({
    name: 'channels',
    method: 'channels',
    red: 0.4,
    green: 0.8,
    blue: 0.6,

}).clone({
    name: 'channelstep',
    method: 'channelstep',
    red: 64,
    green: 64,
    blue: 64,
});

scrawl.makeFilter({
    name: 'tint',
    method: 'tint',
    redInRed: 0.5,
    redInGreen: 1,
    redInBlue: 0.9,
    greenInRed: 0,
    greenInGreen: 0.3,
    greenInBlue: 0.8,
    blueInRed: 0.8,
    blueInGreen: 0.8,
    blueInBlue: 0.4,
});

scrawl.makeFilter({
    name: 'offset',
    method: 'offset',
    offsetX: 12,
    offsetY: 12,
    opacity: 0.5,
});

scrawl.makeFilter({
    name: 'offsetChannels',
    method: 'offsetChannels',
    offsetRedX: -12,
    offsetGreenY: 12,
    offsetBlueX: 3,
    offsetBlueY: -3,
});

scrawl.makeFilter({
    name: 'pixelate',
    method: 'pixelate',
    tileWidth: 20,
    tileHeight: 20,
    offsetX: 8,
    offsetY: 8,
});

scrawl.makeFilter({
    name: 'blur',
    method: 'blur',
    radius: 6,
    passes: 2,
});

scrawl.makeFilter({
    name: 'areaAlpha',
    method: 'areaAlpha',
    tileWidth: 20,
    tileHeight: 20,
    gutterWidth: 20,
    gutterHeight: 20,
    offsetX: 8,
    offsetY: 8,
    areaAlphaLevels: [255, 0, 0, 255],
});

scrawl.makeFilter({
    name: 'matrix',
    method: 'matrix',
    weights: [-1, -1, 0, -1, 1, 1, 0, 1, 1],

}).clone({
    name: 'matrix5',
    method: 'matrix5',
    weights: [-1, -1, -1, -1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
});

scrawl.makeFilter({
    name: 'channelLevels',
    method: 'channelLevels',
    red: [50, 200],
    green: [60, 220, 150],
    blue: [40, 180],
    alpha: [],
});

scrawl.makeFilter({
    name: 'chromakey',
    method: 'chromakey',
    red: 0,
    green: 127,
    blue: 0,
    opaqueAt: 0.7,
    transparentAt: 0.5,
});

scrawl.makeFilter({
    name: 'dropShadow',
    actions: [
        {
            action: 'blur',
            lineIn: 'source-alpha',
            lineOut: 'shadow',
            radius: 2, 
            passes: 2, 
            includeRed: false, 
            includeGreen: false, 
            includeBlue: false, 
            includeAlpha: true, 
        },
        {
            action: 'compose',
            lineIn: 'source',
            lineMix: 'shadow',
            offsetX: 6,
            offsetY: 6,
        }
    ],
});

scrawl.makeFilter({
    name: 'redBorder',
    actions: [
        {
            action: 'blur',
            lineIn: 'source-alpha',
            lineOut: 'shadow',
            radius: 3,
            passes: 2, 
            includeRed: false, 
            includeGreen: false, 
            includeBlue: false, 
            includeAlpha: true, 
        },
        {
            action: 'binary',
            lineIn: 'shadow',
            lineOut: 'shadow',
            alpha: 1, 
        },
        {
            action: 'flood',
            lineIn: 'shadow',
            lineOut: 'red-flood',
            red: 255,
        },
        {
            action: 'compose',
            lineIn: 'shadow',
            lineMix: 'red-flood',
            lineOut: 'colorized',
            compose: 'destination-in',
        },
        {
            action: 'compose',
            lineIn: 'source',
            lineMix: 'colorized',
        }
    ],
});

scrawl.makeFilter({
    name: 'noise',
    actions: [
        {
            action: 'process-image',
            asset: 'perlin',
            width: 500,
            height: 500,
            copyWidth: 500,
            copyHeight: 500,
            lineOut: 'map',
        },
        {
            action: 'displace',
            lineMix: 'map',
            scaleX: 20,
            scaleY: 30,
            transparentEdges: true,
        }
    ],
});

let report = function () {

    let testTicker = Date.now(),
        testTime, testNow, dragging,
        testMessage = document.querySelector('#reportmessage');

    return function () {

        testNow = Date.now();
        testTime = testNow - testTicker;
        testTicker = testNow;

        testMessage.textContent = `Screen refresh: ${Math.ceil(testTime)}ms; fps: ${Math.floor(1000 / testTime)}`;
    };
}();

scrawl.makeRender({

    name: 'demo-animation',
    target: canvas,
    afterShow: report,
});

let events = function () {

    let base = canvas.base,
        group = scrawl.library.group[base.name],
        currentTarget, currentFilter;

    return function (e) {

        e.preventDefault();
        e.returnValue = false;

        let action = false, 
            val;

        switch (e.target.id) {

            case 'target':
                val = e.target.value;

                if (val !== currentTarget) {

                    currentTarget = val;
                    action = true;
                }
                break;

            case 'filter':
                val = e.target.value;

                if(val !== currentFilter){

                    currentFilter = val.split(',');
                    action = true;
                }
                break;
        }

        if (action) {

            base.clearFilters();
            group.clearFilters();
            group.clearFiltersFromEntitys();

            if (currentTarget && currentFilter) {

                switch (currentTarget) {

                    case 'block1' :
                        block1.addFilters(...currentFilter);
                        break;

                    case 'block2' :
                        block2.addFilters(...currentFilter);
                        break;

                    case 'wheel1' :
                        wheel1.addFilters(...currentFilter);
                        break;

                    case 'wheel2' :
                        wheel2.addFilters(...currentFilter);
                        break;

                    case 'group' :
                        group.addFilters(...currentFilter);
                        break;

                    case 'cell' :
                        base.addFilters(...currentFilter);
                        break;
                }
            }
        }
    };
}();

scrawl.addNativeListener(['input', 'change'], events, '.controlItem');

document.querySelector('#target').value = '';
document.querySelector('#filter').value = '';

console.log(scrawl.library);

console.log(myGrad.saveAsPacket());
console.log(myGrad.palette.saveAsPacket());