Javascript Rasterization Base

Simple location to learn rasterization functions such as line, circle, polygon drawing.

by egon

HTML

<canvas id="c"></canvas>
<script>
    // some useful definitions
    var HALF_PIXEL = 4,
        PIXEL_SIZE = HALF_PIXEL*2,
        ROUND_PIXELS = true,
        STRICT = true,
        TAU   = Math.PI*2;
    
    // basic colors
    var RED   = '#f00',
        GREEN = '#0f0',
        BLUE  = '#00f',
        BLACK = '#000',
        GRAY  = '#888',
        WHITE = '#FFF';    
    
    var b = document.body;
    var a = document.getElementsByTagName('canvas')[0];
    var c = a.getContext('2d');
    document.body.clientWidth; // fix bug in webkit
    var W = document.width  - 30, 
        H = document.height - 30;
    a.width  = W;
    a.height = H;
    
    function assert_int(x){
        if(STRICT && (x != (x|0)))
            throw "floating value: " + x;
    }
    
    function clear(){
        c.clearRect(0,0,c.width,c.height);
    };

    function pxl(x,y,color){
        assert_int(x); assert_int(y);
        c.fillStyle = color || '#000';
        var xx = PIXEL_SIZE * (x|0),
            yy = PIXEL_SIZE * (y|0);
        c.fillRect(xx,yy,PIXEL_SIZE,PIXEL_SIZE);
    };
    
    function dot(x,y,color){
        assert_int(x); assert_int(y);
        c.fillStyle = color || '#000';
        var xx = PIXEL_SIZE * (x|0),
            yy = PIXEL_SIZE * (y|0);
        c.beginPath();
        c.arc(xx+HALF_PIXEL,yy+HALF_PIXEL,HALF_PIXEL,0,TAU,0);
        c.fill();
    };
        
    function rct(x,y,color){
        assert_int(x); assert_int(y);
        c.strokeStyle = color || '#000';
        c.lineWidth = PIXEL_SIZE/8;
        var xx = PIXEL_SIZE * (x|0),
            yy = PIXEL_SIZE * (y|0);
        c.beginPath();
        c.moveTo(xx,yy);
        c.lineTo(xx+PIXEL_SIZE,yy+PIXEL_SIZE);
        c.moveTo(xx+PIXEL_SIZE,yy);
        c.lineTo(xx,yy+PIXEL_SIZE);
        c.rect(xx,yy,PIXEL_SIZE,PIXEL_SIZE);
        c.stroke();
    }

    var put = ROUND_PIXELS ? dot : pxl;
    
    function hline(x0,x1,y,c){
        if(x0>x1){var t=x1;x1=x0;x0=t;}
        for(;x0<=x1;x0++)
          ...

JavaScript

// just a faulty line algorithm to show the base code
function line(x0, y0, x1, y1, c) {
    var t;
    if (x0 > x1) { t = x1; x1 = x0; x0 = t; }
    if (y0 > y1) { t = y1; y1 = y0; y0 = t; }
    var dx = x1 - x0,
        dy = y1 - y0,
        g = dy / dx,
        y = y0,
        x = x0;
    if (g <= 1.0) {
        for (; x <= x1; x++) {
            put(x, y | 0, c);
            y += g;
        };
    } else {
        g = 1 / g;
        for (; y <= y1; y++) {
            put(x | 0, y, c);
            x += g;
        }
    }
}


grid();

put = dot;
line(0, 0, 5, 10, BLUE);
put = rct;
line(0, 0, 10, 5, RED);
put = pxl;
line(0, 0, 10, 2, GREEN);