Javascript procedural image

Question

Is it possible to create in javascript(without connecting to server) image, that after creation can be placed on website? In example, I send only formula from server, and client creates image based on it which I can use as jpg/png/bmp background(and do repeating etc).

Answer 1

Yes. There is a canvas element in HTML5. It can be used for 2d images and 3d animations etc.

Here is a set of tutorials about it.

Do you mean something like this:

var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    var centerX = 70;
    var centerY = 70;
    var radius = 70;

    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "black";
    context.stroke();

var img = canvas.toDataURL("image/png");
/*
   returns "data:image/png;base64,iVBORw0KGg...."
   it can be used wherever you want:
    -images 
    -style 
    -etc
*/
var b = document.getElementById("foo");
b.style.backgroundImage = "url(" + img + ")";

Demo and with text