Question

The situation: I have a background image in the body. A canvas context is drawn over that. Then I create shapes over the canvas using the “xor” Global Composite Operation to exclude the overlapping area and render it transparent. This creates cutouts in the canvas, through which you can see portions of the background. So far, all is going well with one minor exception.

The problem: I really like the way my site is not fixed to a certain position. It is flexible. It is not entirely mobile friendly but fits inside a page that is 1024 X 768. The only way to break the layout is by making the window smaller. When you grab the left side of the browser window and drag it to shrink the window to 1000px or less, the cutouts in the canvas move to the right and reveal the wrong part of the background image.

What I want: I am looking for a way to secure the canvas over the dimensions of the background image (a 675 X 600 px area), without losing too much flexibility. The simplest solution to the issue is the most desirable.

My layout is very simple.

THE HTML:

<div id="container">
    <a href="#" id="LftButton" class="hidden">
        <img alt="Previous Frame Button" src="imageFiles/arrowButtonLft.png" />
    </a>
    <a href="#" id="RtButton" onClick="nextWindow()" class="hidden">
        <img alt="Next Frame Button" src="imageFiles/arrowButtonRt.png" />
    </a>
    <div id="canvasWrapper">
        <canvas id="myCanvas" width="675" height="600">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
    <script src="aboutMeScript.js" type="text/javascript"></script>
    </div>
</div>

THE CSS:

body{
padding:0px;
height:775px;
width:985px;
margin:auto;
font-family:"Courier New", Courier, monospace;
font-size:12px;
background-repeat:no-repeat;
background-position:50% 145px;
background-image:url(imageFiles/bubsAndSqs.gif);
font-weight:normal;
}
#container{
width:985px;
height:600px;
clear:both;
margin:auto;
}
#myCanvas{
width:675px;
height:600px;
float:left;
}
#canvasWrapper{
width:675px;
height:600px;
margin:auto;
}
#RtButton{
float:right;
margin-right:34px;
}
#LftButton{
float:left;
margin-left:34px;
}
#RtButton, #LftButton{
margin-top:200px;
}

It seems like the Javascript is irrelevant here. I’ll post it if someone needs to see it, but this is more a style issue than anything. Any input would be greatly appreciated!

Answer 1

I stuck the background image into the canvas wrapper.