My webpage features multiple canvas elements that dynamically appear based on VB code.
Here's a snippet of my aspx page structure:
<canvas id="canvasnhlrc" width="225" height="200" runat="server"></canvas>
<canvas id="canvascwl" width="225" height="200" runat="server"></canvas>
<canvas id="canvashslanguages" width="225" height="200" runat="server"></canvas>
And here's what my aspx.vb code entails:
canvasnhlrc.Visible = False
canvascwl.Visible = False
canvashslanguages.Visible = False
If RouteData.Values("mediasubType") IsNot Nothing Then
Dim qsubMedia As String = RouteData.Values("mediasubType")
Select Case qsubMedia
Case "nhlrc"
canvasnhlrc.Visible = True
Case "cwl"
canvascwl.Visible = True
Case "hslanguages"
canvashslanguages.Visible = True
End Select
End If
For instance, when my page is example.com/nhlrc, the corresponding canvas generated looks like this:
<canvas id="ContentPlaceHolder2_canvasnhlrc" width="225" height="200"></canvas>
To fit this setup, my javascript file is structured as shown below:
function init()
{
var w1 = document.getElementById('ContentPlaceHolder2_canvasnhlrc')
var w1x = w1.getContext('2d');
w1x.shadowOffsetX = 0;
w1x.shadowOffsetY = 0;
w1x.shadowBlur = 20;
w1x.shadowColor = "rgba(0, 0, 0, 0.75)";
w1x.fillStyle = 'rgb(218, 233, 246)';
// Drawing commands for w1 canvas...
var w2 = document.getElementById('ContentPlaceHolder2_canvascwl')
var w2x = w2.getContext('2d');
// Similar drawing commands like above...
var w3 = document.getElementById('ContentPlaceHolder2_canvashslanguages')
var w3x = w3.getContext('2d');
// More drawing commands...
}
onload = init;
But I'm facing an issue where only the first canvas element (NHLRC) renders successfully, while the subsequent ones such as example.com/cwl do not display. When I test with each canvas individually, they work fine. What could be causing this conflict preventing all canvas elements from rendering properly?