WebGL not working

im trying to use webGL is it not supported on replit or anything


<!DOCTYPE html>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <canvas id="canvas1">
    Canvas is not supported in your browser
  <script src="main.js" defer></script>



const canvas = document.querySelector('#canvas1');
const gl = canvas.getContext('webgl');

if (!gl) {
  throw new Error('your screwed cant use this looser');

const vertexData = [
  0, 1, 0,
  1, -1, 0,
  -1, -1, 0,

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
attribute vec3 position;
void main() {
  gl.Position = vec4(position, 1);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
void main() {
gl.FragColor = vec4(1, 0, 0, 1);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

const positionLocation = gl.getAttribLocation(program, `position`);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, 3);

also does any one have any suggestions for were to learn WebGL, youtube just isnt good enough

Since it runs in your browser, the real question is whether it is supported by your browser and OS, not Replit.

its support in my browser. at least i dont see chrome not supporting it

also just relised there was a swear in the code not sure if thats allowed or not

Does https://get.webgl.org/ work? If so, it’s supported.

yes it does work, can you copy the code and run it your self?

Try adding width and height attributes.

1 Like

canvas has a default height and width of 300 x 150, also i did try to but didn’t work. can you run code your self there are errors in console btw
Screenshot 2023-04-30 8.33.52 PM
no of the errors are correct if you copy my code and run it yourself or go to the website
you can click the errors yourself and see that they are wrong

I am not a webGL expert, but looking at the errors this caught my eye:

WebGL warning: linkProgram: Must have a compiled vertex shader attached:

Did you define a vertex shader?

1 Like

what do you mean by defining the vertex shader?

This is what the error is and it is something you need to define in webGL