The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> HOW BIG is the canvas here?
pinklemon
post Aug 15 2015, 12:04 PM
Post #1


Advanced Member
****

Group: Members
Posts: 140
Joined: 29-June 14
Member No.: 21,166
Hi All!
Please, if someone can help: I wonder why this pink background spreads more then the canvas dimensions:

CODE

   <!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        Background:pink;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      // do cool things with the context
      context.font = '40pt Calibri';
      context.fillStyle = 'blue';
      context.fillText('Hello World!', 150, 100);
    </script>
  </body>
</html>  


ps I hope canvas comes still to html does it? dry.gif

MANY THANKS!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
masonh928
post Aug 15 2015, 12:07 PM
Post #2


Serious Coder
*****

Group: Members
Posts: 253
Joined: 17-August 13
From: Indiana
Member No.: 19,570
send a url or a file plz if you can, there may be overriding in background… !important
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pinklemon
post Aug 15 2015, 12:13 PM
Post #3


Advanced Member
****

Group: Members
Posts: 140
Joined: 29-June 14
Member No.: 21,166
Hello!
Please, why don't I see the second canvas (the gold one!) and what to do to see it?

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
Background:pink;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="100" height="200"></canvas>
<canvas id="my" width="100" height="200"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var canvas2 = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
var context2 = canvas2.getContext('2d');
// do cool things with the context

context.fillStyle = "red";
context.fillRect(0, 0, canvas.width, canvas.height);
context2.fillStyle="gold";
context2.fillRect(100,0, canvas.width, canvas.height);
</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2015, 03:48 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(pinklemon @ Aug 15 2015, 07:04 PM) *

Please, if someone can help: I wonder why this pink background spreads more then the canvas dimensions:


Because you've specified the background color for BODY, not for CANVAS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2015, 04:00 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(pinklemon @ Aug 15 2015, 07:13 PM) *

Please, why don't I see the second canvas (the gold one!) and what to do to see it?



HTML
<canvas id="myCanvas" width="100" height="200"></canvas>
<canvas id="my" width="100" height="200"></canvas>



CODE
var canvas = document.getElementById('myCanvas');
var canvas2 = document.getElementById('myCanvas');


You refer to both canvas and canvas2 with the sama id, the id for the first canvas.

CODE
context2.fillRect(100,0, canvas.width, canvas.height);


The coordinates place the color outside the canvas box. You probably want '0,0' as for the first canvas.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 06:02 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC