How to copy PIXI's view into another canvas-CodePudding

In theory it should be as easy as :

//targetCanvas is a canvas node
//app is instance of PIXI.Application
targetCanvas.drawImage(app.view, 0, 0);

But, trust me, It doesn't work!

Sometime (yes, I said sometime) it does work if I add some delay before copying the image into the targetCanvas. ... So, I wonder if there is an asynchronous process happening when PIXI is rendering... but I can not find this information in PIXI's documentation.

var loadImage = async function(imgPath) {
    return new Promise((resolve, reject) => {
        var img = document.createElement("img");
        img.onload = ()=> {
            resolve(img);
        }
        img.src = imgPath;
    })
}



var canvasTag = document.querySelector("#canvasVideo");
var canvasCtx = canvasTag.getContext("2d");

var canvasResult = document.querySelector("#canvasResult");
var canvasResultCtx = canvasResult.getContext("2d");

var canvasWidth = canvasTag.width;
var canvasHeight = canvasTag.height;


var canvasWidth = 320;
var canvasHeight = 240;
const app = new PIXI.Application({
    view: document.querySelector("#glCanvas"),
    transparent: true,
    width: canvasWidth,
    height: canvasHeight
});

const container = new PIXI.Container();
const renderer = PIXI.autoDetectRenderer();
app.stage.addChild(container);

(async ()=> {
    var imgTag = await loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAA5FBMVEX71DP///8AAAAUFRgAABb/2DT/2jT/3DX70yn70h3/3TX70RX70iT70y0AABURExj710T96J/ 8cb84oT20DL//ff844n/ ur 9NL  OMLDxj85I784Hj72lr 997//vr966383mz96aPXti6ZgibvyjH97ru6nioACRfDpSj 8sn 9NT72VAdHBlDOxzqxjFwYCEsKBpNQx07MgxfURNzYReMeCR9ayJfUh/83nEnIQiskSOBbRoRDgONdxzUsystJgk9NhwhHxmwlikvKhpzYiFHPA4dGAa oCZSRhA0LAtCOA1YRGDzAAANp0lEQVR4nO2dWVvbuhaGlcFTbIUMzkASAxkhDE1LobsQIC3sckrP//8/R3EmD5IsWXKw6fkuekEfxXq9pLWWZA0gl7garXZtUu3W 06lYgMA7ErF6fea3cGk3Wok/3iQ5I 32oOmU7FMw7AsXYcQbAQh1HXLMkwDOPXB WGSlUiKsFWr9qFpWF4urKCOQE2nW2slVJMkCFuTZgWZLQItwGkYdm SBKV0wovupWnoPHQea5qVblt2heQS1no6n 0wttR7Nan RyLheR1VT4BuI9Rge fyqiWL8LArB28DqXePJNVMDmHNMeXhrSHNy4mUukkgbFV1Q6TvkQQNqyrBuQoTHtYNKwG8lSyjLswoSHjUl948/dLNnmDGI0R42DeTaJ5BxjshOwoQtnoJ22/HWBeIkLEJj7t74nMZjerxvgknMDn/gpMF48aOeISHl8Ze ZYynHguJxZhdw8OJixodvdEeAH220B3ssDFPgib72LAleKYkZfwyH4vA65kVXgzck7CwTsacCVoDhIkbDj7d6FhGX2u2MhD2Nb3F Np0rkcDgfhifneaBtB8yQJwl5qAJHMnnTCxuX7 tCgLIc1GWckPITp6II76ZAxbLARXiQyTSEmaLBNrTIR1tLUBXcymYYbLITpcaIBMblUBsLUAiLEqgzCFAMixOgULpJwkGZAFsQowpQDMvTFCMJJ2gGjPSqdMKVhwi T/qGKStjOAiBCpGY3NMKjbAACaNEmxSmEjahFBqkRBJQxMYXwMm3JNlm6E4fwLl3DJbqsOj9hNQ1TMuwih0USYUbc6E4maSxFIGxkpw9upBMG/QRCJ4OEBG DJ8xYJ1zJwCfhWMLMdcKV8LkNlhBkJdT7BfEwmL/VsxQJvbKabITn2WyjS FCBoYwe250K1w7Df pmdU2uhSmnYYIszJkIijsT0OEl9n0oxvByyjCkyzGeq M4LRNgPA4w25mLXhMJexm2c2sZHVphC1xN6OoWqmkqcr CgZltiiEPdFGqiqnv34Wrj59G3JWVVGH3z5dFX7 OgWqYB30OpnwUNCEivbyXCx2Dg46xfL1UOMoqQ2vy25B9O9cE7Sj34g wr6YCZXxdbFTWKtTHrEbQx2VtwUPip/GYoj6HYlQMNgrs6tiwaPiZ1ZE9bOvYPlqJoboC/teQrFeqIwPOoWCH5GtoWp wELh7ErMinofTyjoSLXrciGg4ogFURsVgwXPPvF04rDMQyxhXciEmHoixGG0LZQhriDTuyHK6053hC2hfE2ZFQ/CFT27ju6K2qezcMGDolhXtBoYwqpQOqP9wlgC2WIaVVFlii/I2IcJsqoYQkEThjrh2ohRFdWuMSZEKgsaMUw4ESJUn7CWiO6J2F7oFvwmlNsYtRChIzQuVL504lVUfSAQdp5F6gOgEyQUS9iIligcXNGbqXaFcVCrd7MQaqbbgLEh7AqFChUXKtYVpfYn5IKJBTmyPoz0boBQLCPVvuPdxbKiL1TCFyLh2XexqK/7CWtikxcaLhiuCR9opiB2w2VIFCM0zn2Egikpua0VOtR4oV0TPNTy3cxE6rTNa1aEx2ImJDsaRPgv1Yb/UggZUj6adC hYCMl5CWrxtaxKSXtDrF5M RDdK1DIpDQSIFySiEsjiklx QOXCieCtqw5yEUnJ6heERUUTohpSDVCzNI3xG2BaeBU0poXGwJxcJ9RCstUwnLybXS9QDDJawIfqugehp6fvlMIRRL2zbfMJaEwvPA1Gjxs0Qpqf1MLlqspxWB8MDJFZnwjDqU1T4T071CUbhW7leaJaHYBM1SJXLgpifQlJS984VmfCbpzTWhaDdEFf2HPESgxm1KDy7 Izq9D2BlRSg2BbWqKNmZRrQ1m1xQ1JUiGS2XUDBlc0XMTaLGQMRxFz0XYtQycQOik2wRFY2yBDFZEB0eulpGRETYl/DlntSfDjqRRc/w1hfNu13Bvkso5bOvhp Kip4xU79h303nWYIJ3dQUyPjuC0i 5qBIGzqtZGO7sAw/A9yYD4TT7rVU3MxucR7t8dU55t2wfA5gkXGOCE/kLE7AfbgoR854L4V5NweCM95bWQNE2JS0wEQNtdNOh kzoDLuBPtw8UWOCZdZDRCc7PZIm/uHQh3W1Bkl7n7Esti3NY ggwgl/RaS9uKtafGZuaWps ei983MZQEu8zbQkLjMSxt WTMelMs3NntXUuzv5XUD6BS/cK3iiJDVAHKCxVqK9nJddPVryDcyKA1/rQpen4ouNvHJbIELuUv1FG08/T0d2tzVVDR7iEqOpfIt52qAjLzbLwVpvwUpMmpAUjhMq6wJqGZ/vSVNVhWIziSmXHoXiE/SpFp6Hdxle113lOAdkJa0pVPQAZfvXYdkBS9B5b3rkLA PmEFRE8zZFt/A HHb6X/J8y6Kn9BPPzoOU0fyPhqkWLBHuh9bEK9 ReMDz/4GF vfvh5mpME5tpSJaMGJH1cS6uMCyC6qzLlMlug8cH7YQNIWC UYkE73vdD6XPvrM/lfrD7/ZB7wlSxGb7OJyF1yv3tW 8iwgFnR1TA17y8T5g8D57l87yI1gkiPOcLF0vAfH7xDlZU7tGDZ3wPNtrc62lWgPwvU1ylW/fBQy5Edz0N30J9ewWYv9 3u9HmqwfnuVYO69zr2tSH9XPyr/slVBebB1P3UQW0XtfGNX4abx6Uf9snojLcPPaRp9h6bSLXMm/1dIt4sz9vo xe7JTnqcv9a9xrhEufd4jyP7vjpdj322dyxan1GmHOvM3eEuZf9 NulPEWkM Hb9Z5c2Y16nSH IdjVVBseSyY58um3C2IMfZbaKMd4n84I3AMqbMdIGfX3 634F0Wpb3tEPNT4V0RdKlDz8M4m8x2zwzvAEqxHz1PlbaOEKvSqfdt8plwt  Je  a4n2v c/JuVSl5OkR QfOd7nasB5v/6HX26AgvEjIjOrY2x  8j7Fs/ Qfw/pNktc6UnCIWRhlX77HsJ97pBnD2mMfcClB9/TfyykOxwV3Poewb1Xz7cPOMakqXrje37 diw3bvhcDNIp98/79nIfx5hwCyKiaCyvqWqzN/ Pj/jbiHUseqZCCPHHVBKjOn4I/PQTvy/zn6nAO5WxkhJ4z8jd/S6JM6pgFPzd2xjOenOll9DZJmoIMf9nqgr1R0W1Q3yxAMGGTOx8GiXYUJHu5/yLvLe/V5oF22dcwO1ZWBvCmEv2S5gKoSoNYxlSVaaYN8adyqwUOmMo7taZQOjfGvJpyHcUqaJqw6d73E89xYq04XOiYu V1X7jquVCLoDGZkpVs6cPj/ifmcdLJTBnfcXeaOkb3gT0NhoCVaVk5oqC/ns4xzXOlaYxU149FyaMvR1YscMu1aPXh/nQLmnqktTdUKG4GysQmqaNZ6dPr5Syj3EH2NYAQyjwIVENO/hgVf97 zD/PZ0uhjN7NlxMp9OXp9uvUaXeYk SGLhzE0WOVtAWUZWNo1HsFAl/9qXQhuCIlhpHIqNO70nC3jNoRY4RVlR82Igtns19Qene24LlnSOszsgekV nIuNN7xG0Ms CVoihkVu3tkhySz4LWvw8byXSqbJIdMLAZ0LpZ7KHRnbcenwRHGXSzmSXcb6CNruNpqBorojOhhgNCqGMuxEUDTcCYtRIqAO6sgJ3BAfvt5CxfAiNYufYYUKEvr4I3xqApNPvt5BxKtZSqrbgbawPQwkzINF3lMi7Z0ZBIyJ2yNupDPMB77iQSCjxriA0fFiMaEOHdeN8WijSJiL9kQJLKPe JzR0txej2x8kupun6ViVOM8avIIFSyj9XjlkypIynM5HDzdvr1/vH/OPf17fbh5GL2jYKJMOCUIMTvhPidwN6A550ZjXJVK01YBY lMY7137 HfnZff QxsLg/vjRTbXfpsXzIQZvYe0imX5W  SzeB9wBDy3Qecvetkee90zuUG2UI08ZcB0whzvSxFRatH5CATZuk2S5KXiSBswKwgQnBMxqAQ5g4zEhWh0aJQ0Aizktvg7 NmIszVsoBIjBMshLlJ hHNGh0hgjB3knZE8ySCIIow7YiRgNGE6UaMBmQgTDMiAyALYXrdjRmc/Y1LmNKgAc1zlsozEaKxVPoSOGhRAz0nYe4Ipm1IrANaqsZPmGtcpmswZTmUZDsWIRovpikPN vRFeYmzFVT0xkhS5SIQZhrp6Qz6jo9145PmGs4aWiphkOYVZNAmIaWCslzTlIIc0eV9/WpFsBO3UskzOW672hGaOK LskmzLXBe5nRsnkNGI/wvcwIzfAn7KQIc4f7d6rQdEKLEBIkRCMquN maoGI6RjphLnjqrG/ K8Tvg0mSojif93cD6NuNrlivDTCXK51twdG3ewxjpMSIEQup5cwI KL52BkESI71o3kfI5l1YXsJ4UQMVYtI4n4CA2rKtD/JBIiTRzpjVU3nbjxwS85hKhDdnWJ0QP9Vlew 20lixDpvGdIgdQNq8czxI2QREIUIWs99PZF iRE5Xs11kkmJkklXKrdrJhWLEpEZ1a6MUYPdEknRGpN6rZhWDyU0DKMSnMiHBowSoJwqVat2jdMI9KaEOqWYer9ai0JuqWSInTVap80HYBAEakOPUs7EJduIbOZVsVpDs6TgnOVKOFKjVa7dtKt9/pOZSOnX 8OJucXLQkRPUr/A5yNC0f3lG mAAAAAElFTkSuQmCC");
    canvasCtx.drawImage(imgTag, 0, 0, canvasWidth, canvasHeight);

    var bgSprite = PIXI.Sprite.from(imgTag);

    app.stage.addChild(bgSprite);

    canvasResultCtx.drawImage(document.querySelector("#glCanvas"), 0, 0);
})()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://pixijs.download/release/pixi.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <canvas id="canvasVideo" width="320" height="240" autoplay></canvas>
    <canvas id="glCanvas" width="320" height="240" autoplay></canvas>
    <canvas id="canvasResult" width="320" height="240" autoplay></canvas>
</body>
</html>

canvasVideo (left) is normal canvas with 2d context. glCanvas (middle) is a PIXI's view canvasResult (right) is a normal canvas where a PIXI view should be copied into.

We don't have any problem copying canvas into PIXI. (except the CORS prevents the webGL renders the image correctly) But, as you can see, the third canvas is blank. I wonder if there is any solution to this issue... without using PIXI's ticker or setTimeout?

CodePudding user response：

The ticker is not used for non-animated sprites, but apparently pixi still needs ONE frame to draw everything before you can copy it.

I was able to solve your issue with one requestAnimationFrame

(async ()=> {
    var imgTag = await loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAA5FBMVEX71DP///8AAAAUFRgAABb/2DT/2jT/3DX70yn70h3/3TX70RX70iT70y0AABURExj710T96J/ 8cb84oT20DL//ff844n/ ur 9NL  OMLDxj85I784Hj72lr 997//vr966383mz96aPXti6ZgibvyjH97ru6nioACRfDpSj 8sn 9NT72VAdHBlDOxzqxjFwYCEsKBpNQx07MgxfURNzYReMeCR9ayJfUh/83nEnIQiskSOBbRoRDgONdxzUsystJgk9NhwhHxmwlikvKhpzYiFHPA4dGAa oCZSRhA0LAtCOA1YRGDzAAANp0lEQVR4nO2dWVvbuhaGlcFTbIUMzkASAxkhDE1LobsQIC3sckrP//8/R3EmD5IsWXKw6fkuekEfxXq9pLWWZA0gl7garXZtUu3W 06lYgMA7ErF6fea3cGk3Wok/3iQ5I 32oOmU7FMw7AsXYcQbAQh1HXLMkwDOPXB WGSlUiKsFWr9qFpWF4urKCOQE2nW2slVJMkCFuTZgWZLQItwGkYdm SBKV0wovupWnoPHQea5qVblt2heQS1no6n 0wttR7Nan RyLheR1VT4BuI9Rge fyqiWL8LArB28DqXePJNVMDmHNMeXhrSHNy4mUukkgbFV1Q6TvkQQNqyrBuQoTHtYNKwG8lSyjLswoSHjUl948/dLNnmDGI0R42DeTaJ5BxjshOwoQtnoJ22/HWBeIkLEJj7t74nMZjerxvgknMDn/gpMF48aOeISHl8Ze ZYynHguJxZhdw8OJixodvdEeAH220B3ssDFPgib72LAleKYkZfwyH4vA65kVXgzck7CwTsacCVoDhIkbDj7d6FhGX2u2MhD2Nb3F Np0rkcDgfhifneaBtB8yQJwl5qAJHMnnTCxuX7 tCgLIc1GWckPITp6II76ZAxbLARXiQyTSEmaLBNrTIR1tLUBXcymYYbLITpcaIBMblUBsLUAiLEqgzCFAMixOgULpJwkGZAFsQowpQDMvTFCMJJ2gGjPSqdMKVhwi T/qGKStjOAiBCpGY3NMKjbAACaNEmxSmEjahFBqkRBJQxMYXwMm3JNlm6E4fwLl3DJbqsOj9hNQ1TMuwih0USYUbc6E4maSxFIGxkpw9upBMG/QRCJ4OEBG DJ8xYJ1zJwCfhWMLMdcKV8LkNlhBkJdT7BfEwmL/VsxQJvbKabITn2WyjS FCBoYwe250K1w7Df pmdU2uhSmnYYIszJkIijsT0OEl9n0oxvByyjCkyzGeq M4LRNgPA4w25mLXhMJexm2c2sZHVphC1xN6OoWqmkqcr CgZltiiEPdFGqiqnv34Wrj59G3JWVVGH3z5dFX7 OgWqYB30OpnwUNCEivbyXCx2Dg46xfL1UOMoqQ2vy25B9O9cE7Sj34g wr6YCZXxdbFTWKtTHrEbQx2VtwUPip/GYoj6HYlQMNgrs6tiwaPiZ1ZE9bOvYPlqJoboC/teQrFeqIwPOoWCH5GtoWp wELh7ErMinofTyjoSLXrciGg4ogFURsVgwXPPvF04rDMQyxhXciEmHoixGG0LZQhriDTuyHK6053hC2hfE2ZFQ/CFT27ju6K2qezcMGDolhXtBoYwqpQOqP9wlgC2WIaVVFlii/I2IcJsqoYQkEThjrh2ohRFdWuMSZEKgsaMUw4ESJUn7CWiO6J2F7oFvwmlNsYtRChIzQuVL504lVUfSAQdp5F6gOgEyQUS9iIligcXNGbqXaFcVCrd7MQaqbbgLEh7AqFChUXKtYVpfYn5IKJBTmyPoz0boBQLCPVvuPdxbKiL1TCFyLh2XexqK/7CWtikxcaLhiuCR9opiB2w2VIFCM0zn2Egikpua0VOtR4oV0TPNTy3cxE6rTNa1aEx2ImJDsaRPgv1Yb/UggZUj6adC hYCMl5CWrxtaxKSXtDrF5M RDdK1DIpDQSIFySiEsjiklx QOXCieCtqw5yEUnJ6heERUUTohpSDVCzNI3xG2BaeBU0poXGwJxcJ9RCstUwnLybXS9QDDJawIfqugehp6fvlMIRRL2zbfMJaEwvPA1Gjxs0Qpqf1MLlqspxWB8MDJFZnwjDqU1T4T071CUbhW7leaJaHYBM1SJXLgpifQlJS984VmfCbpzTWhaDdEFf2HPESgxm1KDy7 Izq9D2BlRSg2BbWqKNmZRrQ1m1xQ1JUiGS2XUDBlc0XMTaLGQMRxFz0XYtQycQOik2wRFY2yBDFZEB0eulpGRETYl/DlntSfDjqRRc/w1hfNu13Bvkso5bOvhp Kip4xU79h303nWYIJ3dQUyPjuC0i 5qBIGzqtZGO7sAw/A9yYD4TT7rVU3MxucR7t8dU55t2wfA5gkXGOCE/kLE7AfbgoR854L4V5NweCM95bWQNE2JS0wEQNtdNOh kzoDLuBPtw8UWOCZdZDRCc7PZIm/uHQh3W1Bkl7n7Esti3NY ggwgl/RaS9uKtafGZuaWps ei983MZQEu8zbQkLjMSxt WTMelMs3NntXUuzv5XUD6BS/cK3iiJDVAHKCxVqK9nJddPVryDcyKA1/rQpen4ouNvHJbIELuUv1FG08/T0d2tzVVDR7iEqOpfIt52qAjLzbLwVpvwUpMmpAUjhMq6wJqGZ/vSVNVhWIziSmXHoXiE/SpFp6Hdxle113lOAdkJa0pVPQAZfvXYdkBS9B5b3rkLA PmEFRE8zZFt/A HHb6X/J8y6Kn9BPPzoOU0fyPhqkWLBHuh9bEK9 ReMDz/4GF vfvh5mpME5tpSJaMGJH1cS6uMCyC6qzLlMlug8cH7YQNIWC UYkE73vdD6XPvrM/lfrD7/ZB7wlSxGb7OJyF1yv3tW 8iwgFnR1TA17y8T5g8D57l87yI1gkiPOcLF0vAfH7xDlZU7tGDZ3wPNtrc62lWgPwvU1ylW/fBQy5Edz0N30J9ewWYv9 3u9HmqwfnuVYO69zr2tSH9XPyr/slVBebB1P3UQW0XtfGNX4abx6Uf9snojLcPPaRp9h6bSLXMm/1dIt4sz9vo xe7JTnqcv9a9xrhEufd4jyP7vjpdj322dyxan1GmHOvM3eEuZf9 NulPEWkM Hb9Z5c2Y16nSH IdjVVBseSyY58um3C2IMfZbaKMd4n84I3AMqbMdIGfX3 634F0Wpb3tEPNT4V0RdKlDz8M4m8x2zwzvAEqxHz1PlbaOEKvSqfdt8plwt  Je  a4n2v c/JuVSl5OkR QfOd7nasB5v/6HX26AgvEjIjOrY2x  8j7Fs/ Qfw/pNktc6UnCIWRhlX77HsJ97pBnD2mMfcClB9/TfyykOxwV3Poewb1Xz7cPOMakqXrje37 diw3bvhcDNIp98/79nIfx5hwCyKiaCyvqWqzN/ Pj/jbiHUseqZCCPHHVBKjOn4I/PQTvy/zn6nAO5WxkhJ4z8jd/S6JM6pgFPzd2xjOenOll9DZJmoIMf9nqgr1R0W1Q3yxAMGGTOx8GiXYUJHu5/yLvLe/V5oF22dcwO1ZWBvCmEv2S5gKoSoNYxlSVaaYN8adyqwUOmMo7taZQOjfGvJpyHcUqaJqw6d73E89xYq04XOiYu V1X7jquVCLoDGZkpVs6cPj/ifmcdLJTBnfcXeaOkb3gT0NhoCVaVk5oqC/ns4xzXOlaYxU149FyaMvR1YscMu1aPXh/nQLmnqktTdUKG4GysQmqaNZ6dPr5Syj3EH2NYAQyjwIVENO/hgVf97 zD/PZ0uhjN7NlxMp9OXp9uvUaXeYk SGLhzE0WOVtAWUZWNo1HsFAl/9qXQhuCIlhpHIqNO70nC3jNoRY4RVlR82Igtns19Qene24LlnSOszsgekV nIuNN7xG0Ms CVoihkVu3tkhySz4LWvw8byXSqbJIdMLAZ0LpZ7KHRnbcenwRHGXSzmSXcb6CNruNpqBorojOhhgNCqGMuxEUDTcCYtRIqAO6sgJ3BAfvt5CxfAiNYufYYUKEvr4I3xqApNPvt5BxKtZSqrbgbawPQwkzINF3lMi7Z0ZBIyJ2yNupDPMB77iQSCjxriA0fFiMaEOHdeN8WijSJiL9kQJLKPe JzR0txej2x8kupun6ViVOM8avIIFSyj9XjlkypIynM5HDzdvr1/vH/OPf17fbh5GL2jYKJMOCUIMTvhPidwN6A550ZjXJVK01YBY lMY7137 HfnZff QxsLg/vjRTbXfpsXzIQZvYe0imX5W  SzeB9wBDy3Qecvetkee90zuUG2UI08ZcB0whzvSxFRatH5CATZuk2S5KXiSBswKwgQnBMxqAQ5g4zEhWh0aJQ0Aizktvg7 NmIszVsoBIjBMshLlJ hHNGh0hgjB3knZE8ySCIIow7YiRgNGE6UaMBmQgTDMiAyALYXrdjRmc/Y1LmNKgAc1zlsozEaKxVPoSOGhRAz0nYe4Ipm1IrANaqsZPmGtcpmswZTmUZDsWIRovpikPN vRFeYmzFVT0xkhS5SIQZhrp6Qz6jo9145PmGs4aWiphkOYVZNAmIaWCslzTlIIc0eV9/WpFsBO3UskzOW672hGaOK LskmzLXBe5nRsnkNGI/wvcwIzfAn7KQIc4f7d6rQdEKLEBIkRCMquN maoGI6RjphLnjqrG/ K8Tvg0mSojif93cD6NuNrlivDTCXK51twdG3ewxjpMSIEQup5cwI KL52BkESI71o3kfI5l1YXsJ4UQMVYtI4n4CA2rKtD/JBIiTRzpjVU3nbjxwS85hKhDdnWJ0QP9Vlew 20lixDpvGdIgdQNq8czxI2QREIUIWs99PZF iRE5Xs11kkmJkklXKrdrJhWLEpEZ1a6MUYPdEknRGpN6rZhWDyU0DKMSnMiHBowSoJwqVat2jdMI9KaEOqWYer9ai0JuqWSInTVap80HYBAEakOPUs7EJduIbOZVsVpDs6TgnOVKOFKjVa7dtKt9/pOZSOnX 8OJucXLQkRPUr/A5yNC0f3lG mAAAAAElFTkSuQmCC");
    canvasCtx.drawImage(imgTag, 0, 0, canvasWidth, canvasHeight);

    var bgSprite = PIXI.Sprite.from(imgTag);
    app.stage.addChild(bgSprite);

    requestAnimationFrame(() => {
        canvasResultCtx.drawImage(document.querySelector("#glCanvas"), 0, 0);
    });
})()

CodePudding user response：

You don't need to use the PIXI ticker or a custom timer (requestAnimationFrame as in your own response) to render to the canvas. There's the possibility to simply call app.render() in a synchronous way after the desired elements are added to the stage.

On top of that, if you want to prevent having a running application that renders on each frame, you may want to add autoStart: false to your Application config.

var loadImage = async function(imgPath) {
    return new Promise((resolve, reject) => {
        var img = document.createElement("img");
        img.onload = ()=> {
            resolve(img);
        }
        img.src = imgPath;
    })
}

var canvasWidth = 320;
var canvasHeight = 240;
const app = new PIXI.Application({
    view: document.querySelector("#glCanvas"),
    transparent: true,
    width: canvasWidth,
    height: canvasHeight,
    autoStart: false,
});

(async () => {
    var imgTag = await loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAA5FBMVEX71DP///8AAAAUFRgAABb/2DT/2jT/3DX70yn70h3/3TX70RX70iT70y0AABURExj710T96J/ 8cb84oT20DL//ff844n/ ur 9NL  OMLDxj85I784Hj72lr 997//vr966383mz96aPXti6ZgibvyjH97ru6nioACRfDpSj 8sn 9NT72VAdHBlDOxzqxjFwYCEsKBpNQx07MgxfURNzYReMeCR9ayJfUh/83nEnIQiskSOBbRoRDgONdxzUsystJgk9NhwhHxmwlikvKhpzYiFHPA4dGAa oCZSRhA0LAtCOA1YRGDzAAANp0lEQVR4nO2dWVvbuhaGlcFTbIUMzkASAxkhDE1LobsQIC3sckrP//8/R3EmD5IsWXKw6fkuekEfxXq9pLWWZA0gl7garXZtUu3W 06lYgMA7ErF6fea3cGk3Wok/3iQ5I 32oOmU7FMw7AsXYcQbAQh1HXLMkwDOPXB WGSlUiKsFWr9qFpWF4urKCOQE2nW2slVJMkCFuTZgWZLQItwGkYdm SBKV0wovupWnoPHQea5qVblt2heQS1no6n 0wttR7Nan RyLheR1VT4BuI9Rge fyqiWL8LArB28DqXePJNVMDmHNMeXhrSHNy4mUukkgbFV1Q6TvkQQNqyrBuQoTHtYNKwG8lSyjLswoSHjUl948/dLNnmDGI0R42DeTaJ5BxjshOwoQtnoJ22/HWBeIkLEJj7t74nMZjerxvgknMDn/gpMF48aOeISHl8Ze ZYynHguJxZhdw8OJixodvdEeAH220B3ssDFPgib72LAleKYkZfwyH4vA65kVXgzck7CwTsacCVoDhIkbDj7d6FhGX2u2MhD2Nb3F Np0rkcDgfhifneaBtB8yQJwl5qAJHMnnTCxuX7 tCgLIc1GWckPITp6II76ZAxbLARXiQyTSEmaLBNrTIR1tLUBXcymYYbLITpcaIBMblUBsLUAiLEqgzCFAMixOgULpJwkGZAFsQowpQDMvTFCMJJ2gGjPSqdMKVhwi T/qGKStjOAiBCpGY3NMKjbAACaNEmxSmEjahFBqkRBJQxMYXwMm3JNlm6E4fwLl3DJbqsOj9hNQ1TMuwih0USYUbc6E4maSxFIGxkpw9upBMG/QRCJ4OEBG DJ8xYJ1zJwCfhWMLMdcKV8LkNlhBkJdT7BfEwmL/VsxQJvbKabITn2WyjS FCBoYwe250K1w7Df pmdU2uhSmnYYIszJkIijsT0OEl9n0oxvByyjCkyzGeq M4LRNgPA4w25mLXhMJexm2c2sZHVphC1xN6OoWqmkqcr CgZltiiEPdFGqiqnv34Wrj59G3JWVVGH3z5dFX7 OgWqYB30OpnwUNCEivbyXCx2Dg46xfL1UOMoqQ2vy25B9O9cE7Sj34g wr6YCZXxdbFTWKtTHrEbQx2VtwUPip/GYoj6HYlQMNgrs6tiwaPiZ1ZE9bOvYPlqJoboC/teQrFeqIwPOoWCH5GtoWp wELh7ErMinofTyjoSLXrciGg4ogFURsVgwXPPvF04rDMQyxhXciEmHoixGG0LZQhriDTuyHK6053hC2hfE2ZFQ/CFT27ju6K2qezcMGDolhXtBoYwqpQOqP9wlgC2WIaVVFlii/I2IcJsqoYQkEThjrh2ohRFdWuMSZEKgsaMUw4ESJUn7CWiO6J2F7oFvwmlNsYtRChIzQuVL504lVUfSAQdp5F6gOgEyQUS9iIligcXNGbqXaFcVCrd7MQaqbbgLEh7AqFChUXKtYVpfYn5IKJBTmyPoz0boBQLCPVvuPdxbKiL1TCFyLh2XexqK/7CWtikxcaLhiuCR9opiB2w2VIFCM0zn2Egikpua0VOtR4oV0TPNTy3cxE6rTNa1aEx2ImJDsaRPgv1Yb/UggZUj6adC hYCMl5CWrxtaxKSXtDrF5M RDdK1DIpDQSIFySiEsjiklx QOXCieCtqw5yEUnJ6heERUUTohpSDVCzNI3xG2BaeBU0poXGwJxcJ9RCstUwnLybXS9QDDJawIfqugehp6fvlMIRRL2zbfMJaEwvPA1Gjxs0Qpqf1MLlqspxWB8MDJFZnwjDqU1T4T071CUbhW7leaJaHYBM1SJXLgpifQlJS984VmfCbpzTWhaDdEFf2HPESgxm1KDy7 Izq9D2BlRSg2BbWqKNmZRrQ1m1xQ1JUiGS2XUDBlc0XMTaLGQMRxFz0XYtQycQOik2wRFY2yBDFZEB0eulpGRETYl/DlntSfDjqRRc/w1hfNu13Bvkso5bOvhp Kip4xU79h303nWYIJ3dQUyPjuC0i 5qBIGzqtZGO7sAw/A9yYD4TT7rVU3MxucR7t8dU55t2wfA5gkXGOCE/kLE7AfbgoR854L4V5NweCM95bWQNE2JS0wEQNtdNOh kzoDLuBPtw8UWOCZdZDRCc7PZIm/uHQh3W1Bkl7n7Esti3NY ggwgl/RaS9uKtafGZuaWps ei983MZQEu8zbQkLjMSxt WTMelMs3NntXUuzv5XUD6BS/cK3iiJDVAHKCxVqK9nJddPVryDcyKA1/rQpen4ouNvHJbIELuUv1FG08/T0d2tzVVDR7iEqOpfIt52qAjLzbLwVpvwUpMmpAUjhMq6wJqGZ/vSVNVhWIziSmXHoXiE/SpFp6Hdxle113lOAdkJa0pVPQAZfvXYdkBS9B5b3rkLA PmEFRE8zZFt/A HHb6X/J8y6Kn9BPPzoOU0fyPhqkWLBHuh9bEK9 ReMDz/4GF vfvh5mpME5tpSJaMGJH1cS6uMCyC6qzLlMlug8cH7YQNIWC UYkE73vdD6XPvrM/lfrD7/ZB7wlSxGb7OJyF1yv3tW 8iwgFnR1TA17y8T5g8D57l87yI1gkiPOcLF0vAfH7xDlZU7tGDZ3wPNtrc62lWgPwvU1ylW/fBQy5Edz0N30J9ewWYv9 3u9HmqwfnuVYO69zr2tSH9XPyr/slVBebB1P3UQW0XtfGNX4abx6Uf9snojLcPPaRp9h6bSLXMm/1dIt4sz9vo xe7JTnqcv9a9xrhEufd4jyP7vjpdj322dyxan1GmHOvM3eEuZf9 NulPEWkM Hb9Z5c2Y16nSH IdjVVBseSyY58um3C2IMfZbaKMd4n84I3AMqbMdIGfX3 634F0Wpb3tEPNT4V0RdKlDz8M4m8x2zwzvAEqxHz1PlbaOEKvSqfdt8plwt  Je  a4n2v c/JuVSl5OkR QfOd7nasB5v/6HX26AgvEjIjOrY2x  8j7Fs/ Qfw/pNktc6UnCIWRhlX77HsJ97pBnD2mMfcClB9/TfyykOxwV3Poewb1Xz7cPOMakqXrje37 diw3bvhcDNIp98/79nIfx5hwCyKiaCyvqWqzN/ Pj/jbiHUseqZCCPHHVBKjOn4I/PQTvy/zn6nAO5WxkhJ4z8jd/S6JM6pgFPzd2xjOenOll9DZJmoIMf9nqgr1R0W1Q3yxAMGGTOx8GiXYUJHu5/yLvLe/V5oF22dcwO1ZWBvCmEv2S5gKoSoNYxlSVaaYN8adyqwUOmMo7taZQOjfGvJpyHcUqaJqw6d73E89xYq04XOiYu V1X7jquVCLoDGZkpVs6cPj/ifmcdLJTBnfcXeaOkb3gT0NhoCVaVk5oqC/ns4xzXOlaYxU149FyaMvR1YscMu1aPXh/nQLmnqktTdUKG4GysQmqaNZ6dPr5Syj3EH2NYAQyjwIVENO/hgVf97 zD/PZ0uhjN7NlxMp9OXp9uvUaXeYk SGLhzE0WOVtAWUZWNo1HsFAl/9qXQhuCIlhpHIqNO70nC3jNoRY4RVlR82Igtns19Qene24LlnSOszsgekV nIuNN7xG0Ms CVoihkVu3tkhySz4LWvw8byXSqbJIdMLAZ0LpZ7KHRnbcenwRHGXSzmSXcb6CNruNpqBorojOhhgNCqGMuxEUDTcCYtRIqAO6sgJ3BAfvt5CxfAiNYufYYUKEvr4I3xqApNPvt5BxKtZSqrbgbawPQwkzINF3lMi7Z0ZBIyJ2yNupDPMB77iQSCjxriA0fFiMaEOHdeN8WijSJiL9kQJLKPe JzR0txej2x8kupun6ViVOM8avIIFSyj9XjlkypIynM5HDzdvr1/vH/OPf17fbh5GL2jYKJMOCUIMTvhPidwN6A550ZjXJVK01YBY lMY7137 HfnZff QxsLg/vjRTbXfpsXzIQZvYe0imX5W  SzeB9wBDy3Qecvetkee90zuUG2UI08ZcB0whzvSxFRatH5CATZuk2S5KXiSBswKwgQnBMxqAQ5g4zEhWh0aJQ0Aizktvg7 NmIszVsoBIjBMshLlJ hHNGh0hgjB3knZE8ySCIIow7YiRgNGE6UaMBmQgTDMiAyALYXrdjRmc/Y1LmNKgAc1zlsozEaKxVPoSOGhRAz0nYe4Ipm1IrANaqsZPmGtcpmswZTmUZDsWIRovpikPN vRFeYmzFVT0xkhS5SIQZhrp6Qz6jo9145PmGs4aWiphkOYVZNAmIaWCslzTlIIc0eV9/WpFsBO3UskzOW672hGaOK LskmzLXBe5nRsnkNGI/wvcwIzfAn7KQIc4f7d6rQdEKLEBIkRCMquN maoGI6RjphLnjqrG/ K8Tvg0mSojif93cD6NuNrlivDTCXK51twdG3ewxjpMSIEQup5cwI KL52BkESI71o3kfI5l1YXsJ4UQMVYtI4n4CA2rKtD/JBIiTRzpjVU3nbjxwS85hKhDdnWJ0QP9Vlew 20lixDpvGdIgdQNq8czxI2QREIUIWs99PZF iRE5Xs11kkmJkklXKrdrJhWLEpEZ1a6MUYPdEknRGpN6rZhWDyU0DKMSnMiHBowSoJwqVat2jdMI9KaEOqWYer9ai0JuqWSInTVap80HYBAEakOPUs7EJduIbOZVsVpDs6TgnOVKOFKjVa7dtKt9/pOZSOnX 8OJucXLQkRPUr/A5yNC0f3lG mAAAAAElFTkSuQmCC");
    var bgSprite = PIXI.Sprite.from(imgTag);

    app.stage.addChild(bgSprite);

    app.render();
})()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>Document</title>
</head>
<body>
    <canvas id="glCanvas" width="320" height="240"></canvas>
</body>
</html>