Can you use canvas.getContext('3d')? If yes, how?

There is a 3D context for canvas, but it is not called "3d", but WebGL ("webgl").

WebGL should be available in the most up-to-date versions of all browsers. Use:

<!DOCTYPE html>
<html>
 <body>
 <canvas id='c'></canvas>
  <script>
    var c = document.getElementById('c');
    var gl = c.getContext('webgl') || c.getContext("experimental-webgl");
    gl.clearColor(0,0,0.8,1);
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
</html>

how could you use that? I tried 3D before, but didn't really understand

if you think "real" languages are difficult, you will have a lot of trouble with WebGL. In some respects it is quite high level, in other respects it is quite low level. You should brush up on your maths(geometry) and prepare for some hard work.
three.js is a very appreciated library that allows you to do yet a lot of 3d without dealing with webgl directly, check it out.

It's possible to get a WebGL context, which would give you access to that API, allowing for OpenGL ES 2.0-like 3D rendering.

Tags:

Html

Canvas

Html5 Canvas

Related