Render to Texture Background

Help & Support
8

So I actually got this working by creating a global script and a 2nd canvas that is rendered behind application-canvas. I then call the the 2nd canvas to be updated in an update function. This require preserving the drawing buffer. There was a noticeable hit to performance, but I think the result looked ok. Overall, I think I will just stick to the simple gradient, as I’m not sure the performance hit is worth the look I’m going for, even if I only updated every other frame.

Here’s what I did in case someone else wants to do something similar:

index.html:

...

<body>

    <script src="__modules__.js"></script>
    <script src="__start__.js"></script>
    <script src="__loading__.js"></script>
    <canvas id="bgCanvas"></canvas>
    <script src="bg.js"></script>
</body>
...

bg.js

var pcCanvas = document.getElementById('application-canvas');
var pcCtx = pcCanvas.getContext('webgl2');

var bgCanvas = document.getElementById('bgCanvas');
var bgCtx = bgCanvas.getContext('2d');

bgCtx.imageSmoothingEnabled = true;
bgCtx.webkitImageSmoothingEnabled = true;
bgCtx.msImageSmoothingEnabled = true;
bgCtx.filter = "blur(1.5rem)";

var bgUpdate = function(ctx) {

  ctx.drawImage(pcCtx.canvas, 200, 100, 1920, 1080, 0, 0, 480, 270);
}

function bgInit() {
  bgUpdate(bgCtx);
}

window.onload = bgInit;

css:

canvas#bgCanvas {
  display: block;
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
}

RandomScript.prototype.update = function(dt) {
bgInit();
}
3 Likes