HTML5 DIV background transparency

absorb

unread,

Sep 27, 2012, 6:59:47 AM9/27/12

to haxe...@googlegroups.com

Is it possible to somehow modify only the background color in haxe generated DIV? I am trying to achieve the effect so that I can see my body background + the elements created in the DIV.

j...@justinfront.net

unread,

Sep 27, 2012, 7:58:50 AM9/27/12

to haxe...@googlegroups.com

You can change the HtmlDom background style, but that does not require Html5.

myDiv.style.backgroundColor = '0xff0000'; // red

This maybe the best approach depends what your doing exactly.

You can obviously manually draw every pixel of a canvas element so for instance it's possible to process a green screen video by copying the pixels that are not green but this is very heavy but can be used in a limited way, some traditional js for that can be found here..

	https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas

Or draw a fill shape like I do with jigsaws pieces ( source googlecode jigsawx ) and then copy a square of image accross.

         http://www.justinfront.co.uk/jigsawx/JigsawDivtastic.html

But as I said backgroundColor style is fairly light compared to pixel canvas processes, but I would suggest maybe using two div's just put a separate div below your transparent png.  For instance this experiment uses just backgroundColor of div's ( source googlecode divtastic ) so every hexagon for the color pickers is constructed from lots of div's with backgroundColor set.

        http://www.justinfront.net/divtastic/color_picker/ColorPicker.html

You can also use neko/php imagemagik to process png's backend so you could remove backgrounds on the server and send just a png to the browser, but I have never tried doing anything like this.

Hope that helps but maybe I did not follow the question?

absorb

unread,

Sep 27, 2012, 8:13:59 AM9/27/12

to haxe...@googlegroups.com

I'll show you what exactly I'm trying to do. In my index.html file I have the generated haxe code:

<div id="haxe:jeash" style="width: 1000px; height: 560px; display: inline-block;" data-framerate="60"></div>
	
<script>function winParameters () { return {}; }</script>
<script id="haxe:jeash:script" type="text/javascript" src="./Box2dhaXe.js"></script>

Inside that DIV, haxe creates canvases for my graphic assets I'm using. The whole DIV has a solid background, if I do not specify one - it's white.

Later I'm adding my own canvas manually:

<canvas id="handCanvas" width = "280" height = "200"></canvas>

I use it to rotate, scale, and use masks with createJS-haxe on images. I'm doing that because that sort of transformations didn't work in IE9 when applied in jeash.

So now i just want to know if I can somehow set the DIV's default white background to transparent so I can see my HTML <body> background. Is that explanation a bit more clear? Or am I not understanding some mechanics here :P

Here's a link with the html file: http://dl.dropbox.com/u/24174576/imintrouble/index2.html

j...@justinfront.net

unread,

Sep 27, 2012, 10:04:51 AM9/27/12

to haxe...@googlegroups.com

Sorry don't have time to look properly today. Maybe it is not hard to modify Jeash to work better with IE9, that maybe a better approach, make sure you check the current svn for any relevant changes that may resolve IE9 issues.

--
To post to this group haxe...@googlegroups.com
http://groups.google.com/group/haxelang?hl=en

absorb

unread,

Sep 27, 2012, 10:37:24 AM9/27/12

to haxe...@googlegroups.com

That's not the point. It's just the DIV's background that always have a color. The effect I'm after is:

<div id="haxe:jeash" style="background-color: rgba(0, 0, 0, 0)"></div>  // <-- completely transparent bg

So that DIV's children (the canvases) are visible, the DIV's background is not.

Zachary Dremann

unread,

Sep 27, 2012, 2:14:48 PM9/27/12

to haxe...@googlegroups.com

So is there any reason you can't do

createdDiv.style.backgroundColor = "rgba(0,0,0,0)";
//or:
untyped createdDiv.style.opacity = "0.0";

Or am I still missing the point?

clemos

unread,

Sep 27, 2012, 2:52:07 PM9/27/12

to haxe...@googlegroups.com

From your example file, it doesn't seem like your DIV has a solid background...
Actually, if you use Chrome Developer Tool to remove the first
<canvas> inside it, your background will show up just like you expect.
So there seem to be a canvas with id "Root_MovieClip", filled with
white as the background of your stage.
Now I don't know if it's Jeash that adds it or something in your code,
or maybe some other thing with JS third-parties...

Regards,
Clément

absorb

unread,

Sep 27, 2012, 4:17:38 PM9/27/12

to haxe...@googlegroups.com

Oh wow... it was a long day and I even didn't notice the canvases on that generated HTML. I was looking at the source before the compile. It indeed was just the "opacity" attribute in one of the canvases in the DIV. You Sir just made my day! Thanks for the help guys!

Reply all

Reply to author

Forward