Search code examples
htmlcsscanvassvgstylesheet

Draw vector shapes for background of page

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

Solution

  • 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.