Canvas provides APIs to draw in two or three dimensions, where supported. Canvas 2D has wider support than Canvas 3D; the latter is generally not supported on any mobile browser.
You can define what API to use by getting the canvas context. Let us suppose that chart
is our canvas
object. If you want to draw in two dimensions, you can use:
var context=chart.getContext("2D");
Then, you can use the 2D API to draw, for example, a red square defining its color:
context.fillStyle="#FF0000";
Draw the shape as follows:
context.fillRect(0,0,20,20);
For the 3D API, the use is far more complicated. First, it is still not fully supported as some browsers recognize webgl
:
var context=chart.getContext("webgl");
While others use experimental-webgl
:
var context=chart.getContext("experimental-webgl");
This is because the webgl
specification is still in development. Use of WebGL requires knowledge of computer graphics and concepts like cameras, lights, textures, materials, mapping...