How to draw directly to a PIXI canvas?

[JackParke]

I want to use PIXI only as the rendering/drawing part of a game (engine) but I also need the possibility to draw directly (for non-sprite graphics).

I am able to get access to the canvas a) renderer.render() overwrites what I do (even if clearBeforeRender is false) and 2) I guess there's a better way?

What is the correct way make my own renderer / plugin so I can draw directly to the canvas?

Something about... PIXI.CanvasRenderer#registerPlugin

[ivan.popelyshev]

The main idea of PIXI is that you cant just render parts of image. However it has ways to cache things.

In case of webgl, this should help you, however it comes with performence losses.

var renderer = new WebGLRenderer(800, 600, { preserveDrawingBuffer: true} );
//same param is accepted in "new Application"

However I that calling render() for webgl multiple times can affect performance too. There are many optimizations in renderer plugins that will stop work if you try to use them not from pixi rendering pipeline.

There's of simple way to draw something - create separate canvas with 2d canvas, draw somethin there, then use "Texture.fromCanvas" and use it in sprite. However, beware of performance loss because that texture will be uploaded into GPU every frame if you update the canvas.

Anyway, I cant explain all the things, you have to describe your case, or just read the pixi code and learn how it works. It wont be easy, for example this is simple v4 renderer plugin: https://github.com/pixijs/pixi-plugin-example And for canvas, here it is main sprite rendering code: : https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasSpriteRenderer.js , https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/Sprite.js#L317 . 

Sorry, but there's no tutorials on how to make custom renderer plugin, except code examples from pixi and plugins itself. People who know how to do it learn after they already know all tricks with the stage level, you cant just omit learning Container,Transform,Sprite,Graphics,Mesh,RenderTextures before you get to underlying level

If you succeed, you should make a tutorial  

[JackParke]

OK, thanks for the detailed info.

For now I managed now to draw directly to the canvas without the renderer clobbering it.

[SalahCgp]

On 9/20/2017 at 12:47 AM, JackParke said:

OK, thanks for the detailed info.

For now I managed now to draw directly to the canvas without the renderer clobbering it.

Hi Jack, I am trying to pen draw freehand on the pixi but couldn't achieve so far.

Would you please advise how you did it? 

[ivan.popelyshev]

There's open-source project, but it has some strange tricks with coordinates and filters.

https://github.com/wonderunit/alchemancy