Get a webgl texture from a canvas

Question

I'm trying to draw a canvas on another webGL canvas. This is my code.

function createCanvas(width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    return canvas
}

var webGLCanvas = createCanvas(1, 1);
const gl = webGLCanvas.getContext("webgl");

function getColoredTexture(image, color, clip, scale, notWebgl) {
    if(!color || color === 'None') {
        if (notWebgl) {
            var charCanvas = createCanvas(clip.w * scale, clip.h * scale)
            var charContext = charCanvas.getContext("2d");
            charContext.drawImage(image,
                clip.x, clip.y, clip.w, clip.h,
                0, 0, clip.w * scale, clip.h * scale);
            return charCanvas;
        }
        else {
            return image
        }
    }
    // Create new canvas
    var charCanvas = createCanvas(clip.w * scale, clip.h * scale)
    var charContext = charCanvas.getContext("2d");
    // Draw letter on it
    charContext.fillStyle = 'black';
    charContext.fillRect(0, 0, charCanvas.width, charCanvas.height);
    charContext.drawImage(image,
        clip.x, clip.y, clip.w, clip.h,
        0, 0, clip.w * scale, clip.h * scale);
    // Apply color
    charContext.globalCompositeOperation = 'multiply';
    charContext.fillStyle = color;
    charContext.fillRect(0, 0, clip.w * scale, clip.h * scale);
    // Restore the transparency
    charContext.globalCompositeOperation = 'destination-atop';
    charContext.drawImage(image,
        clip.x, clip.y, clip.w, clip.h,
        0, 0, clip.w * scale, clip.h * scale);
    // Restore composite operation
    charContext.globalCompositeOperation = 'source-over';

    if (notWebgl) {
        return charCanvas
    }
    else {

        return gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, charCanvas);
    }
}

I'm coding for Construct 2 which has 2 render modes: webgl and canvas. The code works perfectly for the canvas render mode. And I'm trying to tint an image to a given color and draw that. For that I draw the image on a small canvas, multiply by my color, and then add transparency back. In webgl I'd like to do the same thing, and instead of returning a canvas, I want to return a webGL Texture. However, when I do this, I get this error:

WebGL: INVALID_VALUE: texImage2D: no canvas

Why does this happen and what can I do about it?

Skymen Skymen · Accepted Answer · 2018-08-20T15:22:49

0

votes

I made a mistake when creating my canvas which made it have 0 of height.

Get a webgl texture from a canvas

1 Answers