Я работаю над приложением, которое позволяет обрабатывать изображения, поэтому я использовал Javascript и библиотеку PixiJS, чтобы сделать это возможным. Я хотел обновить изображение курсора при наведении курсора на холст

первое решение я попытался использовать курсор: url(курсор1.png) 4 12, авто; но я не могу изменить размер курсора. Размер по умолчанию 64 пикселей, и я не могу установить другое значение.

второе решение я решил добавить в DOM и обновить позицию x,y с помощью Javascript, но у меня возникла задержка.

третьим решением было интегрировать курсор в мой холст.

последнее решение я попытался разделить действия на 2 холста. Первый касается обработки изображений, а второй-мой курсор.

Со всеми предложениями, сделанными до того, как я потерял FPS, когда холст завис, за исключением первого.

Инициализируйте основной холст для обработки изображений

 function _initMainCanvas(imgData) {
  let newCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    transparent: true
  });

  let blurContainer = new PIXI.Container();

  filters.initFilters();

  // ----------------------------------------------------------------------------------------
  //      Normal Sprite
  // ----------------------------------------------------------------------------------------

  let bg = main.createSprite({
    from: imgData.img,
    interactive: true,
    filters: [filters.getFilterSharpen(), filters.getFilterAdjustment()],
    width: imgData.width,
    height: imgData.height
  });
  newCanvas.stage.addChild(bg);

  //$(".blur_cursor").remove();

  // ----------------------------------------------------------------------------------------
  //      Blur Sprite
  // ----------------------------------------------------------------------------------------

  let bgBlured = main.createSprite({
    from: imgData.img,
    interactive: false,
    filters: filters.getFilters(),
    width: imgData.width,
    height: imgData.height
  });
  blurContainer.addChild(bgBlured);
  blurContainer.mask = containers.getBlurs();

  newCanvas.stage.addChild(blurContainer);
  newCanvas.stage.addChild(blurContainer);

  select.initSelectionRect();
  newCanvas.stage.addChild(select.getSelectionRect());

  canvas.addMainCanvas(newCanvas);
  document.getElementById("container").appendChild(newCanvas.view);
}
 

Инициализируйте холст для обновления курсора при наведении на него мыши

 function _initCursorCanvas(imgData) {
  let cursorCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    transparent: true
  });

  _fillCursorCanvas(cursorCanvas);

  canvas.addCursorCanvas(cursorCanvas);

  document.getElementById("container").appendChild(cursorCanvas.view);
}

function _fillCursorCanvas(cursorCanvas) {
  // emptySprite allows to bind events
  let emptySprite = new PIXI.Sprite();
  emptySprite.interactive = true;
  emptySprite.width = cursorCanvas.screen.width;
  emptySprite.height = cursorCanvas.screen.height;
  cursorCanvas.stage.addChild(emptySprite);

  emptySprite
    .on("pointerdown", canvasEvents.handlerMousedown)
    .on("pointerup", canvasEvents.handlerMouseup)
    .on("pointermove", canvasEvents.handlerMousemove)
    .on("pointerout", canvasEvents.handlerMouseout);

  const scale = W / canvas.getWidth();
  const cursorTexture = new PIXI.Texture.from(
    urlManager.replace("index.php/", "")   "assets/images/cursor_img/50.png"
  );

  let circle = new PIXI.Sprite(cursorTexture);
  circle.width = 50 / scale;
  circle.height = 50 / scale;

  cursorCanvas.stage.addChild(circle);
}
 

Событие перемещения мыши

 const x = e.data.global.x;
const y = e.data.global.y;

cursor.updatePosition(x, y, W);
 

Кто-нибудь знает, как оптимизировать FPS при полете мыши, заранее спасибо !

Зачем вам нужен второй холст только для этого? Если вы хотите обновить курсор, сделайте это в конце цикла обновления, и все, не создавайте новый холст только для этого.