canvas setpixel - final

pixel manipulation of canvas using createImageData and putImageData

by nosir

HTML

<div>
    <canvas id='canvas1' width='300' height='300'></canvas>
</div>

CSS

div {
    position: relative;
    margin: 50px;
}
#canvas1 {
    background: #eee;
}

JavaScript

// init canvas
var element1 = $('#canvas1').get(0);
var canvas1 = element1.getContext('2d');
var element = document.createElement('canvas');
var context = element.getContext('2d');

function setPixel(pixelData, x, y, color) {
    var i = (y * pixelData.width + x) * 4;
    var pixels = pixelData.data;
    pixels[i + 0] = (color >>> 16) & 0xFF;
    pixels[i + 1] = (color >>> 8) & 0xFF;
    pixels[i + 2] = (color >>> 0) & 0xFF;
    pixels[i + 3] = (color >>> 24) & 0xFF;
}

function floodFill(pixelData, x, y, color) {
    if (((color >>> 24) & 0xFF) === 0x00) {
        // transparent floodfill
        return;
    }
    if (x < 0 || y < 0 || x > pixelData.width || y > pixelData.height) {
        return;
    }
    var i = (y * pixelData.width + x) * 4;
    var pixels = pixelData.data;
    if (pixels[i + 3] === 0) {
        pixels[i + 0] = (color >>> 16) & 0xFF;
        pixels[i + 1] = (color >>> 8) & 0xFF;
        pixels[i + 2] = (color >>> 0) & 0xFF;
        pixels[i + 3] = (color >>> 24) & 0xFF;

        floodFill(pixelData, x - 1, y, color);
        floodFill(pixelData, x + 1, y, color);
        floodFill(pixelData, x, y - 1, color);
        floodFill(pixelData, x, y + 1, color);
    }
}

function createBrick() {
    var w = 100 + 60;
    var h = (100 + 60) / 2;

    // 22.6 degrees implementation
    w -= 2;
    h -= 1;

    var xOffsetInner = 100 - 2;
    var yOffsetInner = 0;
    var xOffsetOut = 60 - 1;
    var yOffsetOut = h - 1;

    var imageData = context.createImageData(w, h);

    var color = 0xFF000000;

    for (var i = 0; i < 60; i++) {
        setPixel(imageData, xOffsetInner + i, yOffsetInner + Math.floor(i / 2), color);
        setPixel(imageData, xOffsetOut - i, yOffsetOut - Math.floor(i / 2), color);
    }

    //x axis
    for (var i = 0; i < 60; i++) {
        setPixel(imageData, xOffsetInner + i, yOffsetInner + Math.floor(i / 2), color);
        setPixel(imageData, xOffsetOut - i, yOffsetOut - Math.floor(i / 2), color);
    }

    //z axis
   ...