HTML5 canvas does not display after creating another canvas
Question
Hi i am new to posting on this forum but have used it for some answers before. I am doing a school project using HTML5, CSS and JS to make some teaching lessons. I am using canvas to make some interactive tools, my problem is this: i have several panels with different content on them, on one panel i am using canvas to show some images and information, i am now trying to create another canvas on a different panel but when i do this nothing is displays in the new canvas. When i remove the old canvas code the new canvas code will display but i assume there must be a way to have them both display, help would be much appreciated i really need to get this working for school. and sorry if this is hard to understand my english is still not that great. here is an example of the code if it helps.
<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>
So everything in the first panel wont be displayed, but the second panel will. If i remove the canvas from the second panel then the first panel will be displayed.
<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 canveses are in different div's because each div is a different panel in a carousel so they need to be there and not put onto the same page.
2 answers
solution1
1 2012-04-30 07:37:34
Your HTML structure is wrong, you need something like this:
<html>
<head>
<!-- Here goes your css and js -->
</head>
<body>
<!-- Here goes your html elements -->
</body>
</html>
solution2
0 2012-04-30 16:01:23
Beside the poor structure you have two canvases both referred to by the same variable 'canvas' and two contexts referred to by the same variable 'context'. Hence you really only have one canvas and one context.
EDIT OK here is your code tidied up plus I have changed the coordinates in your second canvas so that the two drawings do not overlap. You can change the coordinates as you wish.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#h1Canvas {
border: 1px solid #9C9898;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var hcanvas = document.getElementById("h1canvas");
var hcontext = hcanvas.getcontext("2d");
hcontext.moveTo(100, 150);
hcontext.lineTo(450, 50);
hcontext.lineWidth = 10;
// set line color
hcontext.strokeStyle = "#ff0000";
hcontext.stroke();
var mcanvas = document.getElementById("myCanvas");
var mcontext = mcanvas.getContext("2d");
mcontext.moveTo(200, 250); //add 100 to coordinates so that two drawings do not lie on top of each other change as needed
mcontext.lineTo(550, 150);
mcontext.lineWidth = 10;
// set line color
mcontext.strokeStyle = "#ff0000";
mcontext.stroke();
};
</script>
</head>
<body>
<canvas id="h1Canvas" width="578" height="200"></canvas>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.