I'm trying to draw some rectangles on top of a loaded image, but no matter whether the image is loaded before or after the rectangle is drawn, the image covers the rectangle.
How to I control the 'layering' or 'z-index' of HTML5 elements?
It is currently Sat Dec 02, 2017 4:11 pm Advanced search
Image loads on top of drawing
11 posts
• Page 1 of 1
Image loads on top of drawing
by Long Con » Fri Jun 18, 2010 1:11 pm
- Long Con
- <h5>
- Posts: 11
- Joined: Fri Jun 11, 2010 4:48 pm
by JAB Creations » Fri Jun 18, 2010 6:36 pm
HTML including HTML5 as far as I know and can only presume is a 2D noun-only language. The moment you try to implement something of an adjective nature you're now talking about CSS. The only exception may be the HTML map element.
-
JAB Creations - <aside>
- Posts: 566
- Joined: Tue Mar 13, 2007 4:48 am
- Location: Sarasota Florida, USA
by Long Con » Fri Jun 18, 2010 6:56 pm
Yeah, ok, I want to use CSS to do it then. I'm having some trouble getting it applied here - I am just starting to learn from scratch here, and I could use some simple help, please!
See, I made the 'backimg' style in the CSS, but I don't know how to get it on to my 'bg' image...
- Code: Select all
<!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>Beyond The Balance Webcast</title>
<style type="text/css">
.backimg{
z-index:0;
}
</style>
</head>
<body>
<canvas id="a" width="540" height="200"></canvas>
<script type="text/javascript">
var a_canvas = document.getElementById("a");
var a_context = a_canvas.getContext("2d");
var bg = new Image();
bg.src = "myPicture.jpg";
bg.style = "backimg";
bg.onload = function() {
a_context.drawImage(bg, 0, 0);
};
a_context.font = "bold 14px sans-serif";
a_context.fillStyle = "#DDDEE4";
a_context.fillText("MY TEXT", 370, 130);
</script>
</body>
</html>
See, I made the 'backimg' style in the CSS, but I don't know how to get it on to my 'bg' image...
- Long Con
- <h5>
- Posts: 11
- Joined: Fri Jun 11, 2010 4:48 pm
by JAB Creations » Fri Jun 18, 2010 7:36 pm
I've got a lot of input for you to get you on the track to writing cleaner code so you can understand things much easier and knock down that initial wall in the way of learning. Once you've caught on to this you'll be able to easier achieve what you originally posted here and I'll help you along the way. 
While this is the forum for HTML5 I still personally advocate XHTML 1.1. While in a live environment you can't yet universally use XHTML served as application/xhtml+xml (HTML is served as text/html and XHTML documents online are almost always served incorrectly as text/html) using XHTML is a great way to force yourself to learn cleaner code. XHTML works in Internet Explorer 9 (but not 8 or older), all versions of Gecko (Firefox, Camino, Netscape except 4), WebKit (Safari, Chrome, etc), and Presto (Opera 7+).
Save the following code as text.xhtml and when you open it up in Firefox (best example) right-clicking and getting the page information will show you the document type.
There are a few things to note....
1.) Don't put any script elements inside the body element, it's really bad practice and leads down the path of using non-standard proprietary features like innerHTML and document.write. Get used to using the anonymous onload function and alert method to help troubleshoot JavaScript if you're going to use it to achieve a goal that you can not with (X)HTML and CSS.
2.) While plain HTML documents might not make you aware of issues of not escaping JavaScript XHTML will since a single XML error will completely break the page in Gecko and Presto (WebKit does not correctly break the page, only the rendering of, and Trident (Internet Explorer) does this correctly with XML but not XHTML, IE9 is still in developer preview testing and with the first preview build did not correctly break the page and display an XML error).
3.) Avoid using double quotes in JavaScript.
So when you have a script element ensure to do the following to enclose the code...
A further reading note, it's ultimately best to only have two script elements, one with static code that will not change over time and a second for changing variables (effected by serverside coding) and your anonymous onload function.
Okay so I haven't worked with Canvas before though I think I may have actually found a bug as Firefox, Opera, and Safari are all still showing a small amount of the green canvas element.
There are two ways to move elements over each other...
1.) Using negative margins.
2.) Using positioning.
Generally negative margins seem to have better backwards compatibility when compared to using positioning (think IE7 and older).
Since this at least looks like a bug (again I have not worked with Canvas) you may want to use the CSS properties position, top, right, bottom, and left in example. I'd check with someone who knows more about canvas to see if what I've found is a bug.
As far as using JavaScript to do this I think getting a better understanding of the role of each language ((X)HTML as a noun, CSS as an adjective, and JavaScript as the verb) will be subjective if you develop good practices or cave to typical prevalent mesh coding many people unfortunately use.
Going from my example if you need more help let me know how close my example is to what you're trying to achieve.
While this is the forum for HTML5 I still personally advocate XHTML 1.1. While in a live environment you can't yet universally use XHTML served as application/xhtml+xml (HTML is served as text/html and XHTML documents online are almost always served incorrectly as text/html) using XHTML is a great way to force yourself to learn cleaner code. XHTML works in Internet Explorer 9 (but not 8 or older), all versions of Gecko (Firefox, Camino, Netscape except 4), WebKit (Safari, Chrome, etc), and Presto (Opera 7+).
Save the following code as text.xhtml and when you open it up in Firefox (best example) right-clicking and getting the page information will show you the document type.
- Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Beyond The Balance Webcast</title>
<style type="text/css">
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
#example1
{
background-color: #0f0;
height: 200px;
width: 500px;
z-index:0;
}
#example2
{
background-color: #00f;
height: 200px;
margin: 0px 0px 0px -500px;
width: 500px;
z-index:0;
}
</style>
<script type="text/javascript">
//<![CDATA[
function a_context()
{
alert('Edit the \'a_context\' function if you think you have to do something with JavaScript.');
/*
var a_canvas = document.getElementById('a');
var a_context = a_canvas.getContext('2d');
var bg = new Image();
bg.src = 'myPicture.jpg';
bg.style = 'backimg';
a_context.font = 'bold 14px sans-serif';
a_context.fillStyle = '#DDDEE4';
a_context.fillText('MY TEXT', 370, 130);
*/
}
window.onload = function()
{
//List individual function names here to executed onload.
a_context();
alert('example onload alert');
}
//]]>
</script>
</head>
<body>
<canvas id="example1"></canvas>
<canvas id="example2"></canvas>
</body>
</html>
There are a few things to note....
1.) Don't put any script elements inside the body element, it's really bad practice and leads down the path of using non-standard proprietary features like innerHTML and document.write. Get used to using the anonymous onload function and alert method to help troubleshoot JavaScript if you're going to use it to achieve a goal that you can not with (X)HTML and CSS.
2.) While plain HTML documents might not make you aware of issues of not escaping JavaScript XHTML will since a single XML error will completely break the page in Gecko and Presto (WebKit does not correctly break the page, only the rendering of, and Trident (Internet Explorer) does this correctly with XML but not XHTML, IE9 is still in developer preview testing and with the first preview build did not correctly break the page and display an XML error).
3.) Avoid using double quotes in JavaScript.
So when you have a script element ensure to do the following to enclose the code...
- Code: Select all
<script type="text/javascript">
//<![CDATA[
/* Your JavaScript code goes here. */
//]]>
</script>
A further reading note, it's ultimately best to only have two script elements, one with static code that will not change over time and a second for changing variables (effected by serverside coding) and your anonymous onload function.
Okay so I haven't worked with Canvas before though I think I may have actually found a bug as Firefox, Opera, and Safari are all still showing a small amount of the green canvas element.
There are two ways to move elements over each other...
1.) Using negative margins.
2.) Using positioning.
Generally negative margins seem to have better backwards compatibility when compared to using positioning (think IE7 and older).
Since this at least looks like a bug (again I have not worked with Canvas) you may want to use the CSS properties position, top, right, bottom, and left in example. I'd check with someone who knows more about canvas to see if what I've found is a bug.
As far as using JavaScript to do this I think getting a better understanding of the role of each language ((X)HTML as a noun, CSS as an adjective, and JavaScript as the verb) will be subjective if you develop good practices or cave to typical prevalent mesh coding many people unfortunately use.
Going from my example if you need more help let me know how close my example is to what you're trying to achieve.
-
JAB Creations - <aside>
- Posts: 566
- Joined: Tue Mar 13, 2007 4:48 am
- Location: Sarasota Florida, USA
by Long Con » Mon Jun 21, 2010 3:04 pm
I've started implementing and experimenting with the help you gave me, and it makes a lot of sense.
You seem to be pushing away from a javascript-heavy page, but this article here seems to teach us to use it for everything.
Is it good to make all my 'layers' on separate Canvases? I plan on having a few small rectangles in animated motion over the background... and some text animation.
You seem to be pushing away from a javascript-heavy page, but this article here seems to teach us to use it for everything.
Is it good to make all my 'layers' on separate Canvases? I plan on having a few small rectangles in animated motion over the background... and some text animation.
- Long Con
- <h5>
- Posts: 11
- Joined: Fri Jun 11, 2010 4:48 pm
by JAB Creations » Mon Jun 21, 2010 5:52 pm
Once you've figured out how to write clean (X)HTML and CSS then if you need JavaScript then use it. You don't seem to know exactly what you want to do.
Does the final product you want animate?
If no then there is no need for JavaScript.
If yes then likely yes.
As far as if the elements are nested or not that is subjective to the goal. Generally if you can animate the elements using the margin property instead of positioning I would then recommend that route.
Play around it with really, you'll get a feel and when you get stuck on something very specific then ask for a clarification.
Does the final product you want animate?
If no then there is no need for JavaScript.
If yes then likely yes.
As far as if the elements are nested or not that is subjective to the goal. Generally if you can animate the elements using the margin property instead of positioning I would then recommend that route.
Play around it with really, you'll get a feel and when you get stuck on something very specific then ask for a clarification.
-
JAB Creations - <aside>
- Posts: 566
- Joined: Tue Mar 13, 2007 4:48 am
- Location: Sarasota Florida, USA
by Long Con » Mon Jun 21, 2010 5:54 pm
Thanks! I do know exactly what I'm going for - it's a Flash piece that I'm trying to replicate in HTML5.
Also, if you know any online guides to writing clean XHTML, maybe I could have a look at them and learn.
Also, if you know any online guides to writing clean XHTML, maybe I could have a look at them and learn.
- Long Con
- <h5>
- Posts: 11
- Joined: Fri Jun 11, 2010 4:48 pm
by JAB Creations » Mon Jun 21, 2010 9:53 pm
Stick to the basics and work around those rules. Keep in mind that XHTML is extensible so you can extend support for HTML5 features.
1.) Make sure the page's media type / mime is application/xhtml+xml. In Firefox just right-click, click on 'View Page Info', and look at the type. In Opera hit F4 and click on the information button (you may have to add it and they don't have text labels by default). But if the file is local on your computer and it has xhtml as the file extension it should work. Keep in mind that WebKit and IE9 (early developer builds at least) will not correctly break the entire page like Firefox or Opera so test with those two browsers first.
2.) Once you have all the bugs worked out in Firefox, Opera, and Safari then you can remove the 'x' and test it in IE. Add the 'x' back to the extension and go back and forth. IE9 does support XHTML albeit early support is rough.
3.) Make your life easy and get a copy of XAMPP (web server software) and use PHP to do content negotiation to serve the same page as XHTML to XHTML capable browsers and as HTML to non-XHTML capable browsers. If you decide to do that ask for further clarification. It's actually way easier ultimately to do this.
3.) Keep your script elements inside the head element, not the body. I can't stress this enough. Learn the value of anonymous functions (in example with the onload event).
4.) Never use document.write or innerHTML. Things you may read about working with the DOM being slow are from the days of IE5 and Netscape 4. Generally if most of your users are using at least Opera 9.0, Safari 3, or Gecko 1.5+ the DOM should fly for the most part. Make use of alert.
5.) Get to know the strengths and weaknesses of JavaScript debuggers. Firefox's JavaScript console (adhere to fixing even strict warnings), Opera's console, Safari's debugger tools, and even IE8's developer toolbar all have their respective strengths even if a lot of people might laugh off IE.
6.) Always test in IE last and you add code after normal code or include it via conditional comments.
7.) Use object detection and always detect the standard method or property first. In example IE8 and older does not support event listeners correctly so you can detect if the standard property is supported or not...
8.) The most important practice: search. Don't know what XAMPP is? SEARCH! Can't figure something out? SEARCH! I've learned 99.9% of what I know simply by searching for the answer. Sometimes it'll take hours to find key information since posted code will be subjective to the situations the people posting it are working with though over time you'll find reading the code becomes easier.
Stick to those good practices and you'll be able to get way ahead of what most people are capable of doing subjective to how enthusiastic you are about it.
1.) Make sure the page's media type / mime is application/xhtml+xml. In Firefox just right-click, click on 'View Page Info', and look at the type. In Opera hit F4 and click on the information button (you may have to add it and they don't have text labels by default). But if the file is local on your computer and it has xhtml as the file extension it should work. Keep in mind that WebKit and IE9 (early developer builds at least) will not correctly break the entire page like Firefox or Opera so test with those two browsers first.
2.) Once you have all the bugs worked out in Firefox, Opera, and Safari then you can remove the 'x' and test it in IE. Add the 'x' back to the extension and go back and forth. IE9 does support XHTML albeit early support is rough.
3.) Make your life easy and get a copy of XAMPP (web server software) and use PHP to do content negotiation to serve the same page as XHTML to XHTML capable browsers and as HTML to non-XHTML capable browsers. If you decide to do that ask for further clarification. It's actually way easier ultimately to do this.
3.) Keep your script elements inside the head element, not the body. I can't stress this enough. Learn the value of anonymous functions (in example with the onload event).
4.) Never use document.write or innerHTML. Things you may read about working with the DOM being slow are from the days of IE5 and Netscape 4. Generally if most of your users are using at least Opera 9.0, Safari 3, or Gecko 1.5+ the DOM should fly for the most part. Make use of alert.
5.) Get to know the strengths and weaknesses of JavaScript debuggers. Firefox's JavaScript console (adhere to fixing even strict warnings), Opera's console, Safari's debugger tools, and even IE8's developer toolbar all have their respective strengths even if a lot of people might laugh off IE.
6.) Always test in IE last and you add code after normal code or include it via conditional comments.
7.) Use object detection and always detect the standard method or property first. In example IE8 and older does not support event listeners correctly so you can detect if the standard property is supported or not...
- Code: Select all
<head>
<script type="text/javascript">
//<![CDATA[
function demo()
{
if (window.addEventListener)
{
alert('standards compliant browser');
}
else if (document.body.attachEvent)
{
alert('proprietary property supported');
}
}
window.onload = function()
{
demo();
}
//]]>
</script>
</head>
8.) The most important practice: search. Don't know what XAMPP is? SEARCH! Can't figure something out? SEARCH! I've learned 99.9% of what I know simply by searching for the answer. Sometimes it'll take hours to find key information since posted code will be subjective to the situations the people posting it are working with though over time you'll find reading the code becomes easier.
Stick to those good practices and you'll be able to get way ahead of what most people are capable of doing subjective to how enthusiastic you are about it.
-
JAB Creations - <aside>
- Posts: 566
- Joined: Tue Mar 13, 2007 4:48 am
- Location: Sarasota Florida, USA
by Long Con » Mon Jul 05, 2010 3:43 pm
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8" />
<title>Beyond The Balance Webcast</title>
<style>
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
#bg-main
{
background-image: url('BYBWebcast background.jpg');
background-color: #ff4200;
z-index:0;
}
#bar1
{
background-color: rgba(255,255,255,0.15);
height: 15px;
margin: 0px 0px 110px -544px;
width: 540px;
z-index:1;
}
</style>
<script type="text/javascript">
function loadFunc()
{
var bar1 = document.getElementById('bar1');
var context = bar1.getContext('2d');
context.translate(0, -200);
}
window.onload = function()
{
//List individual function names here to executed onload.
loadFunc();
}
</script>
</head>
<body>
<canvas id="bg-main" width="540" height="200"></canvas>
<canvas id="bar1"></canvas>
</body>
</html>
My 'context.translate(0, -200); ' is not causing the rectangle to move. Should I be defining the margins in the javascript, and altering them over time?
I need to get a grasp on making something move...
- Long Con
- <h5>
- Posts: 11
- Joined: Fri Jun 11, 2010 4:48 pm
by JAB Creations » Mon Jul 05, 2010 7:28 pm
I can not spend time to teach people one by one how to do overly specific tasks that should be learned from numerous tutorial sites available on the web. The point of my replies was to strengthen the code environment in which you are learning to keep you from going down the wrong path.
What you need to do now is is find a working example of what you want, find it's code, get it to work with the XHTML I've recommended, and minimize the code as much as you possibly can to determine what makes the code work the way you desire. At that point begin to tweak it and continue researching how to achieve secondary goals. Past this point your questions will very likely delve even further off-topic from what these forums are intended for ultimately.
My last tip is that you should ask very specific questions with very specific presented code on forums specific to the languages you are working with, in example a JavaScript forum on a web design / web development forum. Asking really vague questions won't get you any where and the subjectivity is far too great.
What you need to do now is is find a working example of what you want, find it's code, get it to work with the XHTML I've recommended, and minimize the code as much as you possibly can to determine what makes the code work the way you desire. At that point begin to tweak it and continue researching how to achieve secondary goals. Past this point your questions will very likely delve even further off-topic from what these forums are intended for ultimately.
My last tip is that you should ask very specific questions with very specific presented code on forums specific to the languages you are working with, in example a JavaScript forum on a web design / web development forum. Asking really vague questions won't get you any where and the subjectivity is far too great.
-
JAB Creations - <aside>
- Posts: 566
- Joined: Tue Mar 13, 2007 4:48 am
- Location: Sarasota Florida, USA
11 posts
• Page 1 of 1
Who is online
Users browsing this forum: No registered users and 2 guests