HTML - What Canvas Size Do I Use To Design For Each Resolution?

i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame
now this 1.htm is quite a long frame and has a scrollbar
and 2.htm is a short one
i dont the scroll bar beside my frame 1 but want it to be for my entire parent window
ie i wont to scroll both my left and right frames together
how do i do that

Hi!

I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window.

How can I make it do that?

I did it once but just can't seem to remember how I did it.

Thanks

i have to draw ball on canvas in html 5 depending on the input given by user in a textbox.
ex: if a user enter 5 in a textfield, 5 ball should draw on canvas.

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

Hey guys, I'm having trouble typing in Canvas. I tried combining the jquery keyboard (http://net.tutsplus.com/tutorials/ja...ss-and-jquery/) with the canvas in order to directly type on the canvas, but I'm having trouble doing so.

Does anyone have any suggestions? I really appreciate any help you can give me!
Below is pasted the code I have tried so far...


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Online Keyboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

<style>
body {
margin: 0px;
padding: 0px;
}

#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>

window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");



var x = 50;
var y = 50;
context.font = "12pt Calibri";
//context.fillStyle = "orange"; // text color
context.fillText($(function(){
var $write = $('#write'),
shift = false,
capslock = false;

$('#keyboard li').click(function(){
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();

shift = (shift === true) ? false : true;
capslock = false;
return false;
}

// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}

// Delete
if ($this.hasClass('delete')) {
var html = $write.html();

$write.html(html.substr(0, html.length - 1));
return false;
}

// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');

shift = false;
}

// Add the character
$write.html($write.html() + character);
});
});
, x, y);


};
</script>
</head>
<body>

<body onmousedown="return false;">
<canvas id="myCanvas" width="578" height="200">
</canvas>

<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
<li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
<li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem">&nbsp;</li>
</ul>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

My excuses for bothering you with this but I need a little push in the right direction to get started. I'm a 3d (technical) artist, but my HTML knowledge is minimal.

What I have is:
- A PNG image without alpha to be used as the background.
- One or more PNG's with alpha to be composited on top of this background using the embedded alpha channels.

I want to do this using the Canvas element and what I learned from searching the web is they often composite everything offscreen and then draw it to the Canvas.

So if anyone could provide me with small example I would be eternally grateful. It's mainly the syntax that stumps me right now.

Thanks in advance.

I'm drawing text on the screen (mouse coordinates) in this example:

http://www.hindbrain.net/ex5.php

In order to not have new text overlay old text and become unreadable, I have to
clear a background rectangle and then draw the new text.

Is there a way to clear the background rectangle so that it is not white or any solid
color? Ie, is there a way to just clear it so that the original blue background is still there?

thanks,
William

Hello all,

I am trying to replicate a style I have seen on the site listed below, where they appear to be using the CANVAS command to create a gradient top and bottom margin.

I can seem to find anything online about how to do this but obviously they have figured it out.

http://www.xtrememac.com/

Any ideas or pointing me in the right direction are greatly appreciated.

Thanks!

Is this possible? I'd like to draw a screen using the canvas methods and then overlay
html hyperlinks on this (fullscreen) canvas. I have experimented with capturing the
mouse click event and know where I clicked on the canvas, but now I'd just like to
be able to hyperlink to places right from the canvas. It would be convenient if you
could somehow embed hrefs there.

thanks,
William

Hello,

hopefully i can find help here
I want to save my canvas-content to a single image-file. There are an approach using todataurl(), which works fine. But not if i draw an image-file (e.g. car.jpg or house.png) to the canvas additionally. It does not return the whole image? Here I have my simple example-code:

<head>
<script>
window.onload = function()
{

var canvas = document.getElementById("theCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "navy";
context.fillRect(0,0,20,20);

var imagefile = new Image();
imagefile.onload = function ()
{
context.drawImage(imagefile, 22, 0,60,60);
}
imagefile.src = "http://www.sign-arts.de/joomla/images/stories/print_proj/mediclin/icon1.gif";

window.open(canvas.toDataURL('image/png'));

};
</script>
</head>
<body id="bodi">
<canvas id="theCanvas" width="500" height="200" >
</canvas>
</body>

Only the HTML5-methods like fillRect() are rendered to the new window, why this is so? What im doing wrong?
Thanx in advance for help
bilinok

Alright, well I'm needing to resize an image. Not a scaled version, but a 'cropped' version. Like it's called canvas resize in photoshop ect. I hope someone knows what I'm talking about lol

I need to go to the experts here , what I need to do is the following. I have an Adobe Edge animation, I need to take that animation along with a JQuery dropdown menu and put both on one html page. I have basic html knowledge to the point where the edge animation is saved as an html page ( edge automatically does this which includes all the Javascript files separately) So far I'm able to take the edge <div> and ad it to any html page as long as I copy the scripts to the head of that page. The trouble I'm having is adding the JQuery dropdown.

It would be impossible for anyone reading this to know EXACTLY wht I mean without seeing the code, I do not want to add abunch of it or add a link to the files until someone replies and can actually look.

any help?

RD

I have found what seems to be a rather big problem in the HTML canvas

When drawing circles, and I presume all shapes, the size of the circle is different based on whether one is filling it, or sketching it.

If we have a circle of radius 10 and line width k, and we decide to fill it, that line width will be evenly dispersed about the perimeter of the circle such that half the line width is inside the circle, and half is outside the circle.

If, however, the same circle is sketched, the line width will still be the same, but it will now be dispersed entirely on the outside of the circle, thus making it larger.

If I am wrong, and this is how figures are supposed to be drawn, or if I am simply not using the right settings, please let me know =)

Friends
I am new to HTML, I have created a page, but when I view it on 00*600 it looks fine as I designed. But
When resolution is increased, it shows right side empty.
What should I do
?????????

Hi.

I'm just wondering what standart screen resolution i stheese days? Doen anybody still use 800x600, or is it alright to build a website for 1024x768?

If so, is there any "design resolution" to prevent scrollbars in the most usen browsers?
(What i mean is what resolution to give for example a flash site)

Parashurama