• Jump To … +
    ./source/core/animationloop.js ./source/core/component.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/userInteraction.js ./source/core/utilities.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/canvas.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/coordinate.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/filter.js ./source/factory/fontAttributes.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/imageAsset.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/noise.js ./source/factory/oval.js ./source/factory/palette.js ./source/factory/particle.js ./source/factory/particleForce.js ./source/factory/particleHistory.js ./source/factory/particleSpring.js ./source/factory/particleWorld.js ./source/factory/pattern.js ./source/factory/phrase.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/quaternion.js ./source/factory/radialGradient.js ./source/factory/rectangle.js ./source/factory/renderAnimation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/spriteAsset.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/state.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstackedElement.js ./source/factory/vector.js ./source/factory/videoAsset.js ./source/factory/wheel.js ./source/mixin/anchor.js ./source/mixin/asset.js ./source/mixin/assetConsumer.js ./source/mixin/base.js ./source/mixin/cascade.js ./source/mixin/delta.js ./source/mixin/displayShape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shapeBasic.js ./source/mixin/shapeCurve.js ./source/mixin/shapePathCalculation.js ./source/mixin/styles.js ./source/mixin/tween.js ./source/worker/filter-string.js ./source/worker/filter.js
  • ¶

    Core library

    Scrawl-canvas stores most of the objects it creates in a centralized space, so that they can be referenced from other places in the code base, and from user-written code.

    While some sections are dedicated to a single type of object, other sections are aggregations - this may lead to name conflicts if coders are not rigorous in their naming conventions when creating objects (through the make factory functions).

    Exported object (to modules and scrawl object). Scrawl-canvas exposes the library, and its sections, for import into other script files

  • ¶

    No imports required

  • ¶

    Current version

    const version = '8.4.0';
  • ¶

    Objects created using the makeAnchor factory

    const anchor = {};
    const anchornames = [];
  • ¶

    Objects created using the makeAnimation and makeRender factories

    const animation = {};
    const animationnames = [];
  • ¶

    Objects - specifically tickers - created using the makeTicker and makeTween factories

    const animationtickers = {};
    const animationtickersnames = [];
  • ¶

    An aggregate of all contents in the canvas, element, entity and stack sections of the library.

    const artefact = {};
    const artefactnames = [];
  • ¶

    Scrawl-canvas wrappers for visual media (images, videos, sprites). Anything that a Picture entity or Pattern style can use as their asset source needs to be included in this section of the library

    const asset = {};
    const assetnames = [];
  • ¶

    Canvas element wrappers created during Scrawl-canvas initialization, and the makeCanvas, getCanvas and addCanvas factories

    const canvas = {};
    const canvasnames = [];
  • ¶

    Objects created using the makeCell and canvas.buildCell factories

    const cell = {};
    const cellnames = [];
  • ¶

    DOM element wrappers created during Scrawl-canvas initialization, and created using the makeElement, Stack.addExistingDomElement and Stack.addNewElement factories

    const element = {};
    const elementnames = [];
  • ¶

    All canvas-related artefacts (Blocks, Wheels, etc) get stored in the entity section of the library.

    const entity = {};
    const entitynames = [];
  • ¶

    Objects created using the makeFilter factory

    const filter = {};
    const filternames = [];
  • ¶

    Used internally by Phrase artefacts

    const fontattribute = {};
    const fontattributenames = [];
  • ¶

    Objects created using the makeGroup factory, and generated as part of the process of creating Stack and Canvas artefacts, and Cell assets.

    const group = {};
    const groupnames = [];
  • ¶

    Used internally by Gradient and RadialGradient styles

    const palette = {};
    const palettenames = [];
  • ¶

    Physics-related objects

    const particle = {};
    const particlenames = [];
        
    const force = {};
    const forcenames = [];
    
    const spring = {};
    const springnames = [];
        
    const world = {};
    const worldnames = [];
  • ¶

    Stack element wrappers created during Scrawl-canvas initialization, and created using the makeStack and addStack factories

    const stack = {};
    const stacknames = [];
  • ¶

    Objects created using the makeTween and makeAction factories

    const tween = {};
    const tweennames = [];
  • ¶

    Objects created using the makeGradient, makeRadialGradient, makePattern and makeColor factories

    const styles = {};
    const stylesnames = [];
  • ¶

    DOM unstackedElement wrappers created using the makeUnstackedElement and makeComponent factories

    const unstackedelement = {};
    const unstackedelementnames = [];
  • ¶

    All makeXXX factory functions get added as references to the constructors section of the library - used mainly as part of Scrawl-canvas cloning functionality.

    const constructors = {};
  • ¶

    Convenience value, used internally

    const radian = Math.PI / 180;
  • ¶

    Convenience set, used internally

    const css = new Set(['all', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundColor', 'backgroundOrigin', 'backgroundPosition', 'backgroundRepeat', 'border', 'borderBottom', 'borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderColor', 'borderLeft', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRight', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopColor', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'clear', 'color', 'columns', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'emptyCells', 'float', 'font', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontSynthesis', 'fontVariant', 'fontVariantAlternates', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariantPosition', 'fontWeight', 'grid', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoPosition', 'gridAutoRows', 'gridColumn', 'gridColumnStart', 'gridColumnEnd', 'gridRow', 'gridRowStart', 'gridRowEnd', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows', 'gridTemplateColumns', 'imageResolution', 'imeMode', 'inherit', 'inlineSize', 'isolation', 'letterSpacing', 'lineBreak', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBlockStart', 'marginBlockEnd', 'marginInlineStart', 'marginInlineEnd', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'marks', 'mask', 'maskType', 'maxWidth', 'maxHeight', 'maxBlockSize', 'maxInlineSize', 'maxZoom', 'minWidth', 'minHeight', 'minBlockSize', 'minInlineSize', 'minZoom', 'mixBlendMode', 'objectFit', 'objectPosition', 'offsetBlockStart', 'offsetBlockEnd', 'offsetInlineStart', 'offsetInlineEnd', 'orphans', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'pad', 'padding', 'paddingBlockStart', 'paddingBlockEnd', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'pointerEvents', 'position', 'prefix', 'quotes', 'rubyAlign', 'rubyMerge', 'rubyPosition', 'scrollBehavior', 'scrollSnapCoordinate', 'scrollSnapDestination', 'scrollSnapPointsX', 'scrollSnapPointsY', 'scrollSnapType', 'scrollSnapTypeX', 'scrollSnapTypeY', 'shapeImageThreshold', 'shapeMargin', 'shapeOutside', 'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textTransform', 'textUnderlinePosition', 'unicodeRange', 'unset', 'verticalAlign', 'widows', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'zIndex']);
  • ¶

    Convenience set, used internally

    const xcss = new Set(['alignContent', 'alignItems', 'alignSelf', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backfaceVisibility', 'backgroundImage', 'backgroundSize', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'boxDecorationBreak', 'boxShadow', 'boxSizing', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'fontFeatureSettings', 'fontKerning', 'fontLanguageOverride', 'hyphens', 'imageRendering', 'imageOrientation', 'initial', 'justifyContent', 'linearGradient', 'opacity', 'order', 'orientation', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'resize', 'tabSize', 'textAlignLast', 'textCombineUpright', 'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', 'touchAction', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'unicodeBidi', 'whiteSpace', 'writingMode']);
  • ¶

    Exports

    export {
        version,
        anchor,
        anchornames,
        animation,
        animationnames,
        asset,
        assetnames,
        animationtickers,
        animationtickersnames,
        artefact,
        artefactnames,
        canvas,
        canvasnames,
        cell,
        cellnames,
        element,
        elementnames,
        entity,
        entitynames,
        filter,
        filternames,
        fontattribute,
        fontattributenames,
        force,
        forcenames,
        group,
        groupnames,
        palette,
        palettenames,
        particle,
        particlenames,
        spring,
        springnames,
        stack,
        stacknames,
        styles,
        stylesnames,
        tween,
        tweennames,
        unstackedelement,
        unstackedelementnames,
        world,
        worldnames,
        constructors,
        radian,
        css,
        xcss,
    };