The ShipPosition function

If this were production quality code, I would be doing a lot of the work that I am currently doing inside of the initialization routine in this rendering function. Moving sprites around independently on the canvas would require updates to our array buffers. I probably wouldn't define my geometry in the way I did, that is, calculating the sizes by hand. I am not currently making any changes to the array buffer or the texture buffer; I am trying to keep this code to the bare minimum necessary to render a sprite onto the canvas using WebGL. Here is what I have:

function ShipPosition( ship_x, ship_y ) {
    if( image_width == 0 ) {
        return;
    }

    gl.uniform4fv(u_translate_location, [ship_x, ship_y, 0.0, 0.0]);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
}

1. The first few lines check to see whether the image download has completed. If not, we will exit out of this function:

if( image_width == 0 ) {
    return;
}

1. Next, we tell WebGL to load the uniform u_translate uniform variable with our spaceship's coordinates:

gl.uniform4fv(u_translate_location, [ship_x, ship_y, 0.0, 0.0]);

1. Finally, we instruct WebGL to draw triangles with the six vertices in our array buffer:

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