What to do so that the Canvas element is not cleared with each new step?

public draw(gl: GL): void { // position: Point; this.backGL.startDrawing(-position.x, -position.y, this.backGL.getWidth(), this.backGL.getHeight()); // Рисование (без использования метода clean) this.backGL.endDrawing(); }

GL class:

 public startDrawing(x: number = 0, y: number = 0, width: number = this.width, height: number = this.height): void { this.vertexPositions = []; this.vertexColors = []; this.translationPoint = new Point(0, 0); this.scalingPoint = new Point(1, 1); this.loadIdentity(); this.projection = makeOrtho(x, x + width, y + height, y, 0.1, 100); } public endDrawing(): void { // this.clear(); // Я не использую функцию clean, но canvas всё-равно очищается this.mvTranslate([this.translationPoint.x, this.translationPoint.y, -10]); this.mvMatrix.x(Matrix.Diagonal([this.scalingPoint.x, this.scalingPoint.y, 1, 1])); this.context.bindBuffer(this.context.ARRAY_BUFFER, this.squareVerticesBuffer); this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.vertexPositions), this.context.STATIC_DRAW); this.context.vertexAttribPointer(this.vertexPositionAttribute, 3, this.context.FLOAT, false, 0, 0); this.context.bindBuffer(this.context.ARRAY_BUFFER, this.squareVerticesColorBuffer); this.context.bufferData(this.context.ARRAY_BUFFER, new Float32Array(this.vertexColors), this.context.STATIC_DRAW); this.context.vertexAttribPointer(this.vertexColorAttribute, 4, this.context.FLOAT, false, 0, 0); this.setMatrixUniform(this.projection, "uPMatrix"); this.setMatrixUniform(this.mvMatrix, "uMVMatrix"); this.context.drawArrays(this.context.TRIANGLES, 0, this.vertexPositions.length / 3); }

    1 answer 1

    I solved the problem myself. I will leave the answer here, can someone come in handy.

    When getting the context of the Canvas, you need to specify that the drawing buffer should not be replaced, it should be copied. This is done by adding {preserveDrawingBuffer: true} as the second argument in the context get function.

    Example:

      // var canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById(id); this.context = canvas.getContext("webgl", {preserveDrawingBuffer: true}) || canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});