What? In simple terms, it's an HTML tag<canvas></canvas> with a corresponding API, which can be used to define a block on a homepage to which a program can render via JS. The draw API, called Canvas API, which is used with the tag, is kept very classic and simple. It allows for pixel-manipulation, drawing of lines and copying of pixel-buffers to certain areas. The origin is in the upper-left corner. The Canvas feature set is specified by W3C.
Purpose? It can be used to draw computer-generated images to the screen with sporadic or low FPS updates. Possible applications include web applications with simple image generation or content animation.
What? WebGL is a programming interface for low-level access to graphics hardware. It is based on OpenGL ES and has a separate, official specification. The API needs an area to render to (for example a canvas element) and exposes low-level functionalities, like image buffer manipulation, shader compilation and render pipeline description to JS. When using WebGL, all calculations are done in 3D space, with its origin at (0,0,0). The viewport origin is at the center. WebGL is specified by Khronos.
Purpose? It can be used for high-performance visual computing. WebGL allows for hardware speedups of certain calculations and rendering of computer generated content with high FPS. This functionality has its application in the areas of gaming and speeding up of mathematical operations, which can be done in parallel on a GPU.
What? Three.js is a JS library which could be described as a rendering engine. It offers a high-level abstraction over WebGL, so that developers can easily draw 3D content without having to learn the rather extensive and complex WebGL API, while still offering a big performance benefit over the Canvas API. For example, three.js provides a Camera API, default shaders, a scene graph, etc. It's viewport origin is at the center.
Purpose? Three.js was created for the visualization of 2D or 3D content in a performant way. It can be used for games and CAD applications.
If you want to generate a graphic once, or need a simple animation, the Canvas API is the simplest solution and offers everything you need to get the job done within minutes.
For continuous generation of visual content, for example in order to create a game, using a high-level library, like three.js, is ideal, because it implements best practices which have been established and used for such content for a long time. You won't have to learn how the image is drawn on a low level, but how to use the high-level renderer to get the job done. It will take a while to get to know the concepts and principles, however you should get something on the screen in a short amount of time (usually a few hours).
Only if you need all the raw power you can get, or want to do very custom and specific things, it can be justified to go to the low-level API, which is WebGL. You will need to know about the rendering pipeline, about buffers, number formats, memory layouts, shader programming, etc. It is quite a pile of stuff to learn and will take you a lot of time for the initial learning phase. You will likely need a few days to get stuff done.
Marco Alka
Software Engineer, Technical Consultant & Mentor
What is an HTML Canvas?
What? In simple terms, it's an HTML tag
<canvas></canvas>with a corresponding API, which can be used to define a block on a homepage to which a program can render via JS. The draw API, called Canvas API, which is used with the tag, is kept very classic and simple. It allows for pixel-manipulation, drawing of lines and copying of pixel-buffers to certain areas. The origin is in the upper-left corner. The Canvas feature set is specified by W3C.Purpose? It can be used to draw computer-generated images to the screen with sporadic or low FPS updates. Possible applications include web applications with simple image generation or content animation.
Example?
What is WebGL?
What? WebGL is a programming interface for low-level access to graphics hardware. It is based on OpenGL ES and has a separate, official specification. The API needs an area to render to (for example a canvas element) and exposes low-level functionalities, like image buffer manipulation, shader compilation and render pipeline description to JS. When using WebGL, all calculations are done in 3D space, with its origin at
(0,0,0). The viewport origin is at the center. WebGL is specified by Khronos.Purpose? It can be used for high-performance visual computing. WebGL allows for hardware speedups of certain calculations and rendering of computer generated content with high FPS. This functionality has its application in the areas of gaming and speeding up of mathematical operations, which can be done in parallel on a GPU.
Example?
What is three.js?
What? Three.js is a JS library which could be described as a rendering engine. It offers a high-level abstraction over WebGL, so that developers can easily draw 3D content without having to learn the rather extensive and complex WebGL API, while still offering a big performance benefit over the Canvas API. For example, three.js provides a Camera API, default shaders, a scene graph, etc. It's viewport origin is at the center.
Purpose? Three.js was created for the visualization of 2D or 3D content in a performant way. It can be used for games and CAD applications.
Example?
When to use what?
If you want to generate a graphic once, or need a simple animation, the Canvas API is the simplest solution and offers everything you need to get the job done within minutes.
For continuous generation of visual content, for example in order to create a game, using a high-level library, like three.js, is ideal, because it implements best practices which have been established and used for such content for a long time. You won't have to learn how the image is drawn on a low level, but how to use the high-level renderer to get the job done. It will take a while to get to know the concepts and principles, however you should get something on the screen in a short amount of time (usually a few hours).
Only if you need all the raw power you can get, or want to do very custom and specific things, it can be justified to go to the low-level API, which is WebGL. You will need to know about the rendering pipeline, about buffers, number formats, memory layouts, shader programming, etc. It is quite a pile of stuff to learn and will take you a lot of time for the initial learning phase. You will likely need a few days to get stuff done.