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 WL.Texture constructor.

Example

Below, you will find the example from the CanvasRenderingContext2D

 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
WL.registerComponent('my-canvas-texture', {
  mesh: {type: WL.Type.Mesh},
  material: {type: WL.Type.Material},
}, {
  start: function() {
    const canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 300;

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

    // 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 WL.Texture(canvas);
    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();

Example

Updating after Change

Subscribe to our newsletter