import "https://cdn.skypack.dev/@next2d/player@latest";

​

const root = next2d.createRootMovieClip(240, 240, 60, {

    "tagId": "container",

    "fullScreen": true

});

​

const image = new Image();

image.crossOrigin = "Anonymous";

​

image.addEventListener("load", (event) => 

{

    const { Shape, BitmapData } = next2d.display;

    const { ConvolutionFilter } = next2d.filters;

    const bitmapData = new BitmapData();

    bitmapData.image = event.target;

    const shape = root.addChild(new Shape());

    shape

        .graphics

        .beginBitmapFill(bitmapData)

        .drawRect(0, 0, bitmapData.width, bitmapData.height);

    shape.scaleX = shape.scaleY = 0.8;

    shape.x = 80;

    shape.y = 60;

    const a = 2.0 * 0.75;

  const b = 1.0 * 0.75;

  const e = 1.0 - 0.75;

  var matrix = [

    a,  b,  0,

    b,  e, -b,

    0, -b, -a

  ];

    const filter         = new ConvolutionFilter();

    filter.matrixX       = 3;

    filter.matrixY       = 3;

    filter.matrix        = matrix; 

    filter.divisor       = 1.0 - 0.75;

    filter.bias          = 0;

    filter.preserveAlpha = true;

    filter.clamp         = true;

    filter.color         = 0xFF0000;

    filter.alpha         = 1.0;

    shape.filters = [filter];

});

​

image.src = "https://next2d-demonstration.herokuapp.com/image/character.svg";