モザイクメイカー

ランダムでモザイクを生成。 色は意図して明るめに偏らせてる。 縦横の値、キャンバスのサイズを変えても、描画数が追従するように作ってある。小数使うとおかしくなるかも。

HTML

<canvas id="canvas" width="400" height="400"></canvas>

CSS

#canvas{
    border:1px solid #ccc;
    outline:1px solid #333;
}

JavaScript

function addEvent(el, fn, observer, useCapture){
    if (el.addEventListener) {
        el.addEventListener(fn, observer, useCapture);
    } else if (el.attachEvent) {
        el.attachEvent('on'+fn, observer);
    }
}

addEvent(window, "load", func, false);

function func(){
    c = document.getElementById("img.png");
    var ctx = c.getContext("2d");
    var cW = c.width, cH = c.height;

    var pW = 10,//パターンの幅！
        pH = 10;//パターンの高さ！
    //上の設定値をどっちも1pxにするとカラーノイズみたいになるよ！
    //ちょっと処理に時間かかるけど(。-∀-)
    
    //下塗り
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, cW, cH);
    
    //パターン
    ctx.globalAlpha = 1;//パターンの透明度。薄くすると下塗り色の影響を受ける。
    ctx.lineWidth  = pW;

    var xRepeatLength = cW/pW,
        yRepeatLength = cH/pH;
    
    for(i=0;i<yRepeatLength;i++){
        for(j=0;j<xRepeatLength;j++){
            ctx.beginPath();
            var r = parseInt(Math.random()*200+55,10),
                g = parseInt(Math.random()*200+55,10),
                b = parseInt(Math.random()*200+55,10);
            var sColor = "rgb("+r+","+g+","+b+")" ;
            ctx.strokeStyle = sColor;
            ctx.moveTo(pW/2+pW*j, i*pH);
            ctx.lineTo(pW/2+pW*j, i*pH+pH);
            ctx.stroke();
        };
    };
}