Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 305
11684 Avatar asked Mar 21 '12 20:03

11684


People also ask

What is getContext in canvas?

getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.

What is canvas getContext (' 2D ')?

The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.

Can we add both 2D and 3d text on the canvas?

As stated, you cannot do this. However you can put one canvas on top of another and draw to them separately.


2 Answers

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

like image 143
Denis Washington Avatar answered Sep 29 '22 17:09

Denis Washington


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.
like image 37
Steve Avatar answered Sep 29 '22 16:09

Steve