Draw vector shapes for background of page

Question

I need to create multiple vector shapes using HTML5-Canvas, SVG, CSS etc

I know I CAN achieve this via DIV's and Z-index etc but I want to find solution using vector graphics so that I can update the shapes, colors, position, at runtime.

How can I get the shapes to be behind everything other than making a tons of DIVs and changing their z-index?

It looks like the closest I have seen so far is using svg and loading it via background-image.

Here is a image representing what I want to do with CSS: enter image description here

Do you have a question? Or just a request for someone to code this for you? — tnw, May 07 '13 at 14:59
Are you thinking of a [background](http://www.w3schools.com/css/css_background.asp)...? Or do those shapes have some kind of functionality other than cosmetic appearance of the page? — tnw, May 07 '13 at 15:07
No sorry the shapes need to be drawn in CSS not using images. — fred1234, May 07 '13 at 15:10
as I stated in the question I need to be able to programmatic change the colors of the background boxes along with the rest of the page and I don't want to create that many images and it would reduce flexibility and increase loading time. — fred1234, May 07 '13 at 15:16
You can programmatically change the background to an identical background with a different color. What makes you think this would dramatically increase loading time? — tnw, May 07 '13 at 15:17
@tnw has a point here. Why are you trying to avoid a standard web convention of using a background image? You could use a html 5 canvas for this but I'm sure that would have a lot more of an impact on loading times that a couple of interchangeable images. — jezzipin, May 07 '13 at 15:20
You could even have all of the backgrounds loaded on top of each other and change their opacity/z-index/visibility/etc, there's so many simple options available, I don't understand why you're rejecting them. — tnw, May 07 '13 at 15:22
Im sorry but I don't think you have read the question. I can do it with divs and z-index etc. but I do not want to I want to find a better way for the reasons I stated above. — fred1234, May 07 '13 at 15:28
You wouldn't have to create loads of images. Draw all of the boxes on one image. Then, modify the colours in that image and save a new version. Then programatically replace the background image. — jezzipin, May 07 '13 at 15:28
@Trapline It depends what you mean by better. In what way? Speed of implementation? What you are asking would take a lot longer to do using: multiple images (production and alteration), html5 canvas. A fundamental part of creating decent applications and websites is http://en.wikipedia.org/wiki/KISS_principle K.I.S.S — jezzipin, May 07 '13 at 15:30
@Trapline I *have* read the question, and the only reasons you've really stated amount to "just because". I'm not convinced there's a better way to do this. Do you have demonstrable evidence that the solutions we've offered, or the ones you've tried, directly cause issues with loading the page in appropriate time? — tnw, May 07 '13 at 15:30
@Jezz yes thank you. That is very helpful. I understand it will take longer. I am more interested in the hows than achieving a one time result. I would mark your comment as helpful but I don't think I am allowed because of all the down votes. — fred1234, May 07 '13 at 15:34
@Trapline The problem is you have already been given adequate explanations of different methods. I can understand your pursuit for knowledge but in terms of implementation you may never actually use more advanced techniques. There is a reason that everyone here is providing the most simple obvious solutions and that's because they are tried and tested and in most cases, standards. — jezzipin, May 07 '13 at 15:41

ralph.m · Answer 1 · 2013-05-07T15:18:05.947

3

You can do this with a combination of border-radius on the boxes that are positioned absolutely (either in relation to the viewport or in relation to some kind of wrapper element). You could give them a low or negative z-index. The transparency can be done with rgba colors. E.g.

background: rgba(69,126,138,0.3);
border-radius: 15px;

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

.wrapper {
    background: rgba(162,200,208,0.2);
    width: 600px; 
    margin: 0 auto;
    position: relative;
    height: 400px; /* temp */
}

.box {
    background: rgba(69,126,138,0.3);
    position: absolute;
    z-index: -1;
}

.one {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    top: 30px;
    left: 30px;
}

.two {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    top: 90px;
    left: 90px;
}

</style>

</head>
<body>
    <div class="wrapper">
        <div class="box one"></div>
        <div class="box two"></div>
    </div>
</body>
</html>

edited May 07 '13 at 15:18

answered May 07 '13 at 15:08

ralph.m

13,468
3
23
30

Thank you but I requested a solution not using a bunch of div's – fred1234 May 07 '13 at 15:09
1

Then what are you planning on applying the CSS styling to...? – tnw May 07 '13 at 15:14
I have a wrapper div a body etc – fred1234 May 07 '13 at 15:16
1

If you don't want divs, then you could use the multiple background images feature of CSS3 (though older browsers will be left behind). You could just pepper these background images all over the body element, I suppose, though I've never tried that. – ralph.m May 07 '13 at 15:19

score 0 · Accepted Answer · edited May 23 '17 at 10:25

This link should get you started with regards to creating rounded corners in a HTML 5 canvas.

http://www.html5canvastutorials.com/tutorials/html5-canvas-rounded-corners/

It will also allow you play around and come up with a solution that looks like your image. With regards to then putting this behind other elements, wrap the remainder of your elements in a div and apply

    z-index: 10

to this div (ensuring this is a higher number than the z-index applied to the canvas element). Refrain from using

    z-index: -1

as this can cause havoc in some browsers.

See here for more info:

An html5 canvas element in the background of my page?

Obviously using a HTML5 canvas means that your site would not be fully backwards compatible.

See here for info regarding compatibility:

http://caniuse.com/#feat=canvas

N.B. I can't really help you anymore than this as I've never used HTML 5 canvas. I personally think it's an over complicated way of presenting an image but I guess others have a more practical use for it.

Draw vector shapes for background of page

2 Answers2