I’m making some kind of UI layers with HTML5 canvas. All layers can be nested and can have alpha. Nested layers should be drawn with correct alpha composition. To do this, some kind of temporary bitmap storage is required. How can I store graphics drawing into temp bitmap?
Share
You can always make a canvas in memory (as in not add it to the DOM)
storedCanvas = document.createElement('canvas');Then you can paint an entire canvas to that canvas:
storedCtx.drawImage(firstCanvas, 0, 0);Then you can do whatever you want to the first canvas, the stored one won’t change. Then, when you want to recall that, you just do
firstCanvasCtx.drawImage(storedCanvas, 0, 0);