I would like to generate a bitmap for use with a webgl texture generated from a 2d canvas, but I don't think I am doing it correctly. I know how to display the contents of one canvas into another by using "drawImage". As has been posted many times, the trick is to make sure the width and height values of the canvas are multiplied by the "display" ratio (1.25 in my case). So if I create some graphics in canvas "a", by using ctx.rect, ctx.fillText, etc. and display the graphics of canvas a into canvas b I have to make sure that both canvases are multiplied by the ratio above and css displayed accordingly.

What is the proper way to generate the bitmap for a WebGL texture using a the canvas? I thought the webgl canvas should have also had the multiplier as above, but that does not seem to work for me. Assuming the image is displayed 1:1 I was thinking I could create the image 1:1 zoom, generate a texture vertext that exactly (0,0) to (1,1) and a "point" vertext that was also 1:1 the size of the image (translated to -1,1 space, of course). Is this correct or am I thinking about it wrong?

Thanks, Jose

  • $\begingroup$ Not quite clear on what you're asking here. You can use a canvas as a texture for a WebGL context in another canvas. Typically, this "texture"-canvas would be off-screen. There's no need to worry about aspect. Best if the dimensions of the texture are powers of 2. "256x256", "128x64", and "1024x4096" are all fine. Affect your aspect ratio using mapping coordinates and geometry. $\endgroup$
    – Jack
    May 9, 2017 at 23:17


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.