In blogger

I have a newer blog post with

<canvas width = "570" height = "570" id = "my_Canvas1"></canvas>

and a document.getElementById() stmt

var canvaspmet = document.getElementById('my_Canvas1');

Another older post has two canvases:

<canvas height="200" id="mycanvas" width="600"></canvas>
var canvastemp = document.getElementById('mycanvas');

and

<canvas height="300" id="my_Canvas" width="300"></canvas>
var canvas = document.getElementById('my_Canvas');

Now the problem is if the two blog posts are viewed in one page the WebGL does not work. If I open individual posts they work fine and I get the images proper in the individual blog posts.

What might be the issue? I have used unique Id for each canvas in each posts.

In my blogger blog: https://cglabprojects.blogspot.com

I have a newer blog post with

<canvas width = "570" height = "570" id = "my_Canvas1"></canvas>

and a document.getElementById() stmt

var canvaspmet = document.getElementById('my_Canvas1');

Another older post has two canvases:

<canvas height="200" id="mycanvas" width="600"></canvas>
var canvastemp = document.getElementById('mycanvas');

and

<canvas height="300" id="my_Canvas" width="300"></canvas>
var canvas = document.getElementById('my_Canvas');

Now the problem is if the two blog posts are viewed in one page the WebGL which does the rotation of the cube stops working(interaction). If I open individual posts they work fine and I get the images rendered perfectly.

What might be the issue? I have used unique Id for each canvas in each posts.