# WebGL Simple 2D Example 3

• Now the drawTriangle function can take a color too.
• We will only support coloring the whole triangle one solid color.

#### Full JavaScript code on this page: (or you can View Page Source)

```var gl, canvas, vertices = []

// UPDATE: Add colors and alpha to drawTriangle()
function drawTriangle(x1, y1, x2, y2, x3, y3, r, g, b, a) {
// WebGL wants colors to be floats from 0 to 1. (not 0 to 255)
r /= 255
g /= 255
b /= 255

// UPDATE: Add r,g,b,a to all points of the triangle.
vertices.push(
x1, y1, r, g, b, a,
x2, y2, r, g, b, a,
x3, y3, r, g, b, a
)

}

function gameLoop() {
window.requestAnimationFrame(gameLoop)

// Clear the screen.
gl.clear(gl.COLOR_BUFFER_BIT)

// Draw the moving triangle.
drawTriangle(
-0.5+Math.sin(Date.now()*.004), 0.5,
-0.5, -0.5,
0.5, -0.5,
// UPDATE: Animate the blue color.
0, 255, 128 + Math.floor(Math.sin(Date.now()*.01) * 127), 1
)

// White triangle semi transparent.
drawTriangle(
-0.7, 0.0,
-0.8, -0.2,
-0.6, -0.1,
// UPDATE: Set color and alpha.
255, 255, 255, .4
)

// Third triangle gold.
drawTriangle(
0.7, 0.0,
0.8, -0.2,
0.6, -0.1,
// UPDATE: Set color and alpha.
255, 210, 11, 1
)

// Tell webGL to draw these triangle this frame.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)

// Draw all the triangles.
gl.drawArrays(gl.TRIANGLES, 0, vertices.length/6)

// Clear vertices. We will fill it every frame.
// This way you don't need to delete objects from the screen. You just stop drawing them.
vertices = []
}

function glSetup() {
canvas = document.getElementById("myCanvas")
gl = canvas.getContext("experimental-webgl")

// Set the viewport size to be the whole canvas.
gl.viewport(0, 0, canvas.width, canvas.height)

// Set the background color to sky blue.
gl.clearColor(.5, .7, 1, 1)

// Tell webGL that we aren't doing anything special with the vertex buffer, just use a default one.
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())

var vertCode =
"attribute vec2 coordinates;" +
// UPDATE: rgba comes from our vertices array.
"attribute vec4 rgba;" +
"varying highp vec4 rgbaForFrag;" +

"void main(void) {" +
// We are passing in only 2D coordinates. Then Z is always 0.0 and the divisor is always 1.0
" gl_Position = vec4(coordinates, 0.0, 1.0);" +
// UPDATE: Pass the color and transparency to the fragment shader.
" rgbaForFrag = rgba;" +

"}"

// Create a vertex shader object.

var fragCode =
"varying highp vec4 rgbaForFrag;" +
"void main(void) {" +
// UPDATE: Use the passed in color and alpha.
" gl_FragColor = rgbaForFrag;" +

"}"

// Tell webGL to use both my shaders.

// Tell webGL to read 2 floats from the vertex array for each vertex
// and store them in my vec2 shader variable I've named "coordinates"
// We need to tell it that each vertex takes 24 bytes now (6 floats)
gl.vertexAttribPointer(attribute, 2, gl.FLOAT, false, 24, 0)
gl.enableVertexAttribArray(attribute)

// UPDATE: Tell webGL how to get rgba from our vertices array.
// Tell webGL to read 4 floats from the vertex array for each vertex
// and store them in my vec4 shader variable I've named "rgba"
// Start after 8 bytes. (After the 2 floats for x and y)
gl.vertexAttribPointer(attribute, 4, gl.FLOAT, false, 24, 8)
gl.enableVertexAttribArray(attribute)

// Tell webGL that when we set the opacity, it should be semi transparent above what was already drawn.
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
gl.enable(gl.BLEND)
}

`					`