Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Objects are overlapping?

    Hello All,

    I am doing a simple school assignment using HTML5 Canvas in conjunction with some ultra-basic javascript. Problem is when the browser renders the canvases, they are technically overlapping. If I remove the canvas on top, the bottom shows up just fine. It is really throwing me for a loop. Any help is greatly appreciated.

    Code:
    <!-----Begin Text Pattern Fill ----->
    <div id="textPatternDiv">
    <h2> Text With Pattern Fill</h2>
    	<canvas id="textPatternCanvas" width="560" height="200">
    		 Your browser does not support the HTML5 canvas tag. Please update to the latest version of your browser.
    	</canvas>
    	<script>
             var canvas = document.getElementById('textPatternCanvas');
             var contextPat = canvas.getContext('2d');
    		 var imagePat = new Image();
    
             imagePat.src = '../images/green_cup.png';
             
    		 
             window.onload = function drawText()
             {
                pattern           	  = contextPat.createPattern(imagePat, 'repeat');
                contextPat.fillStyle = pattern;
                contextPat.font      = '100px Arial';
                contextPat.fillText('Hello!', 100, 100);
             }
         </script>
    </div>
    
    
    <!-----End Text Pattern Fill ----->
    
    <!-----Begin Picture Canvas----->
    
    <div id="pictureCanvasDiv">
    <h2>Canvas Picture</h2>
    	<canvas id="pictureCanvas" width="510" height="342">
    	  	Your browser does not support the HTML5 canvas tag. Please update to the latest version of your browser.
    	</canvas>
        <script>
          	var canvasPic = document.getElementById('pictureCanvas');
          	var context = canvasPic.getContext('2d');
          	var imageObj = new Image();
    		
    		imageObj.src = '../images/sunset21.jpg';
    
          	window.onload = function drawImage() {
            context.drawImage(imageObj, 10, 10);
          	}
          	
        </script>
    </div>
    
    <!-----End Picture Canvas----->

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by gravsdsnc View Post
    If I remove the canvas on top, the bottom shows up just fine. It is really throwing me for a loop. Any help is greatly appreciated.
    HTML event handler properties can only have one value. When you assign window.load a value in the second script, it overwrites the value in the first script.

    You have two solutions. The first is to not utilize events—they don't appear to be necessary in these two scripts—and execute the functions immediately:
    Code:
    // Function Call by Name Reference:
    function drawText() {
    	// [...]
    };
    drawText();
    Code:
    // Self‐Executing Function:
    (function drawText() { // The function name is optional.
    	// [...]
    })();
    The second is to use the addEventListener method, which allows you to assign multiple handlers to an event:
    Code:
    function drawText() {
    	// [...]
    };
    addEventListener("load", drawText); /* or
    addEventListener("DOMContentLoaded", drawText); if you don't want to wait for all page resources to load first. */
    
    /* You can explicitly reference the window object, if desired:
    window.addEventListener("load", drawText); // or
    document.defaultView.addEventListener("load", drawText); // or
    this.addEventListener("load", drawText); */
    Also worth noting that HTML comments cannot contain the character sequence -- (aside from the sequence at the start and end). See http://www.whatwg.org/specs/web-apps....html#comments. For example, the following is invalid: <!-----Begin Text Pattern Fill ----->
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •