Simple canvas example

Simple drawing on canvas with a general use object.

by mhctoledo

HTML

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

CSS

#cvs {
    border: 1px solid #000;
}

JavaScript

/**
 * PLEASE READ THIS!
 *
 * This is an early prototype of what has later become Canvas2D.js, a little library I'm working on. Please use that instead of this horrible thing ;)
 *
 * URL : https://github.com/ankr/Canvas2D.js
 */
function Canvas(canvas) {
    var context = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;
    
    // Draw a circle
    this.circle = function(x, y, r, fill, stroke) {
        context.beginPath();
        context.arc(x, y, r, 0, Math.PI * 2, false);

        if (fill)   { context.fill(); }
        if (stroke) { context.stroke(); }
    
        return this;
    };
    
    // Draw a half circle
    this.halfCircle = function(x, y, r, clockwise) {
        clockwise = clockwise ? true : false;
 
        context.beginPath();
        context.arc(x, y, r, Math.PI, 0, clockwise);
        context.stroke();
        
        return this;
    };
    
    // Set canvas draw color
    this.setColor = function(type, color) {
        if (type === 'fill') {
            context.fillStyle = color;
        } else if (type === 'stroke') {
            context.strokeStyle = color;
        }
        
        return this;
    };
    
    // Clear entire canvas
    this.clear = function() {
        context.clearRect(0, 0, width, height);
        
        return this;
    };
}

// Getting reference to dom
var cvs = document.getElementById('cvs');

// Creating new canvas
new Canvas(cvs)
    .setColor('fill', 'yellow')
    //.circle(200, 200, 175, true, true) // face
    .circle(200, 200, 190, true, true) // face
    .setColor('fill', 'black')
    
    
    //.clear();