
previous

page 13
next
The answer is to create a second canvas which sits on top of the first and to use this second canvas just for the robot image.
But how to make it sit on top? Simple! Use a grid like we did in Project 6.
index.html
<html>
<head>
<title>Spirolaterals</title>
<link rel='stylesheet' href='styles.css'>
<script src='globals.js'></script>
<script src='my.js'></script>
</head>
<body onResize='setup();'>
<div id='canvasses'>
<canvas id='c'></canvas>
<canvas id='robot'></canvas>
</div>
<script>setup(); setTimeout(test,500);</script>
</body>
</html>
<head>
<title>Spirolaterals</title>
<link rel='stylesheet' href='styles.css'>
<script src='globals.js'></script>
<script src='my.js'></script>
</head>
<body onResize='setup();'>
<div id='canvasses'>
<canvas id='c'></canvas>
<canvas id='robot'></canvas>
</div>
<script>setup(); setTimeout(test,500);</script>
</body>
</html>
styles.css
#canvasses {
display:grid;
}
#c, #robot {
border:1vmin groove gold;
grid-row:1;
grid-column:1;
}
display:grid;
}
#c, #robot {
border:1vmin groove gold;
grid-row:1;
grid-column:1;
}
previous
next