Aptacode/BlazorCanvas

Only a single Canvas on a page supported?

Opened this issue · 1 comments

Zigby commented

I was moving from the using Blazor.Extensions.Blazor to this one and enjoy the library but stumbled upon a problem. When I add more than one canvas it seems drawing ends up in one and the same canvas.
Except for having multiple canvases at different positions, it is also very useful with layers having different z order for two canvases.

This is the layout. Drawing in Canvas1 actually ends up in Canvas 2.

<div class="canvas1">
    <BlazorCanvas @ref="Canvas1">
        <canvas width="@Width" height="@Height"></canvas>
    </BlazorCanvas>
</div>
<div class="canvas2">
    <BlazorCanvas @ref="Canvas2">
        <canvas width="@Width" height="@Height"></canvas>
    </BlazorCanvas>
</div>

<style>
    .canvas1 {
        position: relative;
        top: 8px;
        width: 100%;
        height: 600px;
        left: 0
    }

    .canvas2 {
        position: relative;
        top: 608px;
        width: 100%;
        left: 0
    }
</style>

image

Looks like that is the case:

export function canvas_register(divElement) {