First-time posting a question, and I avow up front that my HTML/CSS/Javascript knowledge is ... shall we say scrappy. I usually manage, but I can't seem to figure this out.
All I want to do is display an image centered. Then create a canvas, position the canvas over the image, and draw on it. Then have the canvas stay with the image as the browser is re-sized. Here's what I have so far (I confess, I got much of the Javascript code from another poster, and I'm trying to use it as a learning example):
<!DOCTYPE html>
<html>
<head>
<script>
function myInit()
{
hdc = set_canvas();
hdc.fillRect(0, 0, 50, 50);
}
function set_canvas()
{
var img = document.getElementById('audubon_image');
var x = img.offsetLeft,
y = img.offsetTop,
w = img.clientWidth,
h = img.clientHeight;
var c = document.getElementById('myCanvas');
img.parentNode.appendChild(c);
c.style.zIndex = 1;
c.style.left = x + 'px';
c.style.top = y + 'px';
c.setAttribute('width', w+'px');
c.setAttribute('height', h+'px');
hdc = c.getContext('2d');
return(hdc);
}
</script>
<style>
#container
{
text-align: center;
}
canvas
{
pointer-events: none;
position: absolute;
border: 1px solid black;
}
</style>
</head>
<body onload='myInit()'>
<div id="container">
<img src="http://ift.tt/1IPE4zv" id="audubon_image" />
<canvas id='myCanvas'></canvas> <!-- gets re-positioned in myInit(); -->
</div>
</body>
</html>
What's supposed to happen: The image gets placed. Then the Javascript code determines the position and size of the image, and sets the canvas to match. Then draws on the canvas (for the moment, a lovely elegant block box in the upper left corner).
So far, so good. But since the image centered, if the browser is re-sized (specifically made wider or narrower), the image's position moves relative to the left and right edges of the browser window.
With 'position: absolute' specified for the canvas, the canvas does not move (unsurprisingly; I suppose that's what absolute means). So the image and canvas do not stay aligned.
If I change the canvas CSS to 'position: relative', then when I re-size the window, the image and canvas remain in the same position relative to one another (which is what I want). But then I can't get the canvas over the top of the image.
My gut feel is that this should be possible (easy, even), and my lack of knowledge is causing me not to see it.
Aucun commentaire:
Enregistrer un commentaire