How do i modify canvas transparency in HTML5?

Question

so i have my index.html and a canvas.css

body{
}
#canvasHIPPO{
 display:block;
 margin:0px auto 0px;
 width:100%;height:100%
 background-image:url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg')
}

in my index.html:

<div id="container">
<canvas id="canvasHIPPO" width="800" height="600" display="block"></canvas>
</div>

I would like to know how to: 1) center the canvas ontop of the background city image, despite 2) different screen sizes and/or 3) maintain the same aspect ratio.

I was pretty sure the margin:0,auto should have fixed the (1) and centered the canvas ontop of the background image...what am i missing?

Thanks!

Michael Peterson · Accepted Answer · 2012-07-17 03:03:39Z

1

Are you trying to centre the image horizontally or vertically? If you are centring it horizontally, in your css it should be:

#content {
    background-image: url('http://www.pcl.co.nz/site/pclimaging/images/Big%20Print%20Carry.jpg');
}

#contentHIPPO {
    margin: 0 auto;
    display: block; 
    width: 800px;
    height: 600px;
}

and in your html:

<div id="content">
    <div id="contentHIPPO">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

This will cause the div to be centred horizontally, with the image repeating in the background. If you want the image to be re-sized to the browser window, you would need to use javascript to get the size of the window.

answered Jul 17, 2012 at 3:03

Michael Peterson

1,1236 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bouncingHippo Over a year ago

hi michael, lets say im trying to have this app work on different mobile devices, and hence different screen sizes..what do i do, assuming my javascript function returns me the correct screen/window size?

Michael Peterson Over a year ago

Check out css-tricks.com/perfect-full-page-background-image - they explain it better than I would be able to. And if you use their method, you can forgo the #content div

kongaraju · Accepted Answer · 2012-07-17 04:48:06Z

1

Why not you use

display: webkit-box;

The new css3 provide more properties follow the tutorial

http://www.w3schools.com/css3/default.asp

answered Jul 17, 2012 at 4:48

kongaraju

9,66511 gold badges59 silver badges79 bronze badges

Comments

Jules · Accepted Answer · 2012-07-17 05:12:33Z

1

If it's a small project, you can always convert your hex colours (#FFFFFF) to RGB and Alpha (where the alpha channel is transparency), which looks something like this rgba(255,255,255,100). However, if you've got hundreds, or even thousands, of instances of colour references, you're probably better off Googling a tutorial.

answered Jul 17, 2012 at 5:12

Jules

14.6k13 gold badges60 silver badges108 bronze badges

Collectives™ on Stack Overflow

How do i modify canvas transparency in HTML5?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related