I read about the canvas tag in HTML5, and always saw getContext('2d')
.
The parameter is '2d', so isn't there another possibility like '3d'?
And, how could you use that? I tried 3D before, but didn't really understand (due to a non-explaining tutorial). Any Tutorials?
4 Answers
There is a 3D context for canvas, but it is not called "3d", but WebGL ("webgl").
-
9Oops, I didn't see that Peter had the same answer posted a few seconds earlier. Please accept his answer if you are happy with either of both. Mar 21, 2012 at 20:34
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.
The 3d context is not yet implemented in most browsers. I believe that there is an experimental version of Opera that supplies one, and an addon for FF that does the same, but none of them are ready for primetime. You'll have to wait for wide adoption and implementation.
and I think JavaScript is more easy than a real programming language
Javascript is a 'real' programming language. Being a high level language does not make it a toy or fake (and this is coming from a systems guy who, in your opinion, writes code in "real" programming languages every day).
-
4
-
1
-
1I think WebGL is supported in most of the browsers(including mobile) except IE. Read here ichemlabs.com/1375.– LuckyDec 23, 2015 at 7:39
getContext('4d')
coming soongetContext('space-time')
is obsolete and deprecated.