[Solved] Draw vector shapes for background of page

by


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.

solved Draw vector shapes for background of page