Create a Texture with Canvas2D

If you need to create textures at runtime to paint on dynamically, you may want to make use of CanvasRenderingContext2D, which is the Browsers set of 2D drawing methods on the <canvas> element.

In Wonderland Engine, you can create a texture from a canvas by simply passing it to the Texture constructor.

Example

Below, you will find the example from the CanvasRenderingContext2D MDN page integrated in Wonderland Engine:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import {Component, Property, Texture} from '@wonderlandengine/api';

export class MyCanvasTexture extends Component {
    static TypeName = 'my-canvas-texture';
    static Properties = {
        /* Set this material in the editor. The texture gets to applied to
         * all objects using it. */
        material: Property.material()
    };

    start() {
        const canvas = document.createElement('canvas');
        canvas.width = 300;
        canvas.height = 300;

        const ctx = canvas.getContext('2d');
        /* Do your 2D drawing here (this is the example from MDN) */

        // White background fill
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Change fill color back to black
        ctx.fillStyle = '#000';
        // Set line width
        ctx.lineWidth = 10;

        // Wall
        ctx.strokeRect(75, 140, 150, 110);

        // Door
        ctx.fillRect(130, 190, 40, 60);

        // Roof
        ctx.beginPath();
        ctx.moveTo(50, 140);
        ctx.lineTo(150, 60);
        ctx.lineTo(250, 140);
        ctx.closePath();
        ctx.stroke();

        /* Now wrap the canvas into a Wonderland Engine texture */
        this.canvasTexture = new Texture(this.engine, canvas);
        /* Apply the texture to the material */
        this.material.diffuseTexture = this.canvasTexture;
    }
}

Updating after Change

After you changed a canvas after creating the initial texture, make sure to update the texture to reflect the changes.

For the above example, you would:

1
    this.canvasTexture.update();

Provide additional parameters to Texture.update() to update only a subrange for better performance.