I would like to know if there are any javascript libraries to help in rendering graphics. I searched google and didn't find any tools. I want to make Gauss curves in canvas.

I would like to know if there are any javascript libraries to help in rendering graphics. I searched google and didn't find any tools. I want to make Gauss curves in canvas.

• javascript
• jquery
• html
• canvas

Share Improve this question Follow edited Mar 14, 2012 at 3:01 Andrew Marshall 97k2020 gold badges227227 silver badges217217 bronze badges asked Mar 11, 2012 at 3:17 DelarnDelarn 5911 gold badge11 silver badge88 bronze badges 3

• I predict this will be closed as either a duplicate or a polling question in less than 20 minutes. Which tools did you find so far? – Dagg Nabbit Commented Mar 11, 2012 at 3:20
• The only place worth it is html5 canvas tutorials ... but there is no "libraries" – Delarn Commented Mar 11, 2012 at 3:25
• 3 google./search?q=canvas+libraries --> first search result. – Dagg Nabbit Commented Mar 11, 2012 at 3:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I have used and remend the KineticJS library. It's actively maintained and updated regularly.

This took me 15 seconds to find. Play with it until it gets you what you like.

$(document).ready(drawGaussian);

var canvasContext;
var points;
var noise = 0;

function drawGaussian()
{   
canvasContext = document.getElementById("gaussian-canvas").getContext("2d");

document.getElementById("gaussian-canvas").onclick = cycleNoise;

cycleNoise();
}

function cycleNoise()
{   
canvasContext.clearRect(0, 0, 400, 400);

var m = Math.random() > .4
var amount = Math.round(Math.random() * 20000);
var size = Math.round(Math.random() * 3)+1;

document.getElementById("particles").innerHTML = amount;
document.getElementById("size").innerHTML = size;

switch(noise)
{
    case 0:
        drawGaussianField(amount, size, 200, 200, 400, 100, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Field";
        break;
    case 1:
        drawGaussianCurves(amount, size, 200, 200, 400, 150, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Curves";
        break;
    case 2:
        drawGaussianDiamond(amount, size, 200, 200, 400, 130, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Diamond";
        break;
    case 3:
        drawGaussianOval(amount, size, 200, 200, 300, 300, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Circle";
        break;
    case 4:
        drawGaussianBurst(amount, size, 200, 200, 120, 120, m);
        document.getElementById("type").innerHTML = (m ? "Monochromatic" : "Chromatic") + " Burst";
        break;
}

noise++;

if(noise > 4) noise = 0;
}


function drawGaussianField(amount, thickness, x, y, width, height, monochromatic)
{
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[3]), y + ((height*.5) * points[2]), thickness, thickness);  
}
}

function drawGaussianCurves(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[2]), thickness, thickness);  
}
}

function drawGaussianDiamond(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[3]), thickness, thickness);  
}
}

function drawGaussianOval(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[0]), y + ((height*.5) * points[1]), thickness, thickness);  
}
}

function drawGaussianBurst(amount, thickness, x, y, width, height, monochromatic){
for(i = 0; i < amount; i++)
{
    points = getGaussianPoints();

    setColor(monochromatic);
    canvasContext.fillRect(x + ((width*.5) * points[2]), y + ((height*.5) * points[3]), thickness, thickness);  
}
}

function setColor(val){
if(val)
{
    canvasContext.fillStyle = '#ffffff';
}
else
{
    canvasContext.fillStyle = "#"+Math.floor(Math.random()*16777215).toString(16);
}
}

function getGaussianPoints(){
var x1, x2, w, y1, y2;

do {
    x1 = 2.0 * Math.random() - 1.0;
    x2 = 2.0 * Math.random() - 1.0;
    w = x1 * x1 + x2 * x2;
} while ( w >= 1.0 );

w = Math.sqrt( (-2.0 * Math.log( w ) ) / w );
y1 = x1 * w;
y2 = x2 * w;

return [x1, x2, y1, y2];
}

There are a few html5 canvas javascript libraries. One of the more plete ones is paper.js

Here is a good parison in smashing magazine between Raphael, Paper and Processing javascript libraries

Paper.js is pretty good for HTML5 canvas. As mentioned earlier you should avoid libraries based on SVG or VML because most won't work on Android devices.