Greetings! I am a newcomer to this forum, but I have utilized it for answers in the past. Currently, I am working on a school project that involves using HTML5, CSS, and JS to create teaching lessons. My approach includes utilizing canvas to develop interactive tools. However, I am facing an issue wherein I have multiple panels with distinct content. One panel employs canvas to display images and information successfully, while attempting to add another canvas to a different panel results in nothing being displayed. Although removing the old canvas code allows the new canvas code to appear, I seek a way to have them both visible concurrently. Any assistance in resolving this matter would be greatly appreciated as I need to make progress on this project for school. Apologies if my explanation is unclear, English is not my first language. Below is a snippet of the code for reference:
<div class="panel">
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("h1Canvas");
var context = canvas.getContext("2d");
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
// set line color
context.strokeStyle = "#ff0000";
context.stroke();
};
</script>
</head>
<body>
<canvas id="h1Canvas" width="578" height="200"></canvas>
</body>
</html>
</div>
<div class="panel">
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
// set line color
context.strokeStyle = "#ff0000";
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
</div>
In summary, the contents of the first panel are not displaying, whereas the second panel appears correctly. Removing the canvas from the second panel enables the first panel's content to show up.
<div class="panel">
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
context.strokeStyle = "#ff0000";
context.stroke();
};
</script>
</head>
<body>
<div><canvas id="myCanvas" width="578" height="200"></canvas></div>
</body>
</div>
<div class="panel">
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var h1canvas = document.getElementById("h1Canvas");
var cntxt = h1canvas.getContext("2d");
cntxt.moveTo(100, 150);
cntxt.lineTo(450, 50);
cntxt.lineWidth = 10;
cntxt.strokeStyle = "#ff0000";
cntxt.stroke();
};
</script>
</head>
<body>
<div><canvas id="h1Canvas" width="578" height="200"></canvas></div>
</body>
</div>
The canvases are placed in different divs due to each div representing a unique panel within a carousel, requiring separate placement rather than combining them on one page.