Three.js Cookbook

Getting started with the Canvas renderer

If your system doesn't support WebGL, there is an alternative renderer that you can use to render your scenes: the CanvasRenderer object. This renderer doesn't use WebGL to render the output, but directly uses JavaScript to draw the HTML5 canvas element.

Getting ready

In the r69 Version of Three.js, the canvas renderer has been removed from the default distribution. To use this renderer, we have to first import the following two files:

    <script src="../libs/CanvasRenderer.js"></script>
    <script src="../libs/Projector.js"></script>

For this recipe, you can take a look at the 01.02-canvasrenderer-skeleton.html example from the sources in this chapter. If you open this example in your browser, you'll see a cube, ...