CODEWITHSUNDEEP
htmlcanvas
Corfitz.
Corfitz.

Reputation: 1884

HTML5 generate canvas background image

I have this image that I made in photoshop, and I would like a way to recreate it using HTML5 Canvas, so that javascript is creating the same image (or similar).. It would make the page loading faster, since no image has to be downloaded also.

It is a pretty simple image. Three different colors blurred or placed as gradients ( I don't know how to do it) and then a white gradient from the bottom fading out to transparent after maybe 60px. I have seen so many incredible things made possible using canvas element, and this is the same image every time, and with no animations. Also I would like it to scale automatically when the window is resizing.

Does anybody know how to create something like this?

enter image description here

Upvotes: 6

Views: 3427

Answers (2)

r043v
r043v

Reputation: 1869

you can also try do it with old school method :- )

using an algorithm to generate the colors array

exemple for a pink gradent :

var colors = [];

for(var x=0;x<width;x++)
    for(var y=0;y<height;y++)
    {   var red = 0x6b+(x>>2)+(y>>2); if(red>0xff) red = 0xff;
        colors[y*width+x] = (red<<16)|(0x2b<<8)|0xc6;
    }

and use some code to extract each color r,g,b to fill the canvas with it

while(i < size){
    color = colors[i]; // get color

    // extract r,g,b ...
    var r = (color>>16)&255;
    var g = (color>>8)&255;
    var b = color&255;

    // fill buffer with each color part
    buffer[n++] = r;
    buffer[n++] = g;
    buffer[n++] = b;
    buffer[n++] = 255; // alpha to max
    i++;
}

fiddle : http://jsfiddle.net/r043v/FTuPC/9/

Upvotes: 2

user1467267
user1467267

Reputation:

Start here http://jsfiddle.net/5pR46/1/:

CSS

#wrapper canvas {
    position: relative;
}

#wrapper canvas {
    border: 1px solid red;
    position: absolute;
    background-color: transparent;
}

HTML

<div id="wrapper">
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <canvas id="myCanvas2" width="578" height="200"></canvas>
</div>

JavaScript

function drawRadial(elemId, startColor, endColor, x0, y0, r0, x1, y1, r1) {
    var canvas = document.getElementById(elemId);
    var context = canvas.getContext('2d');

    context.rect(0, 0, canvas.width, canvas.height);

    // create radial gradient
    var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
    grd.addColorStop(0, startColor);
    grd.addColorStop(1, endColor);

    context.fillStyle = grd;
    context.fill();

    delete canvas;
    delete context;
    delete grd;
}

drawRadial('myCanvas', 'rgba(248,173,133,1.0)', 'rgba(0,0,0,0.0)', 50, 25, 110, 300, 50, 400);
drawRadial('myCanvas2', 'rgba(213,215,155,1.0)', 'rgba(0,0,0,0.0)', 500, 150, 110, 500, 50, 600);

You can add as many layers as you want. Just add another;

<canvas id="myCanvas#" width="578" height="200"></canvas>

.. where # is the new number of your layer (keep them in the correct order to get the correct results tho. You could even go as far with JavaScript as just start with an empty #wrapper and just fill it dynamically with canvas-incremented ID's and then binding the full drawing procedure to it. Giving you super clean code while maintaining control over the content.

Play around with the coordinates and the size of the radials and it'll fit soon enough like you want it. I'll leave the rest of the creativity to you ;)

Upvotes: 3

Related Questions