HTML5 Canvas

HTML

<div class="wrap">
<canvas id="canvas" />
</div>

CSS

canvas {
    border:1px solid green;
    height: 50%;
    width=50%;
}

.wrap {
  height: 500px;
  width=500px;
  border: thin solid red;
}

JavaScript

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function Line(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
    this.length = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
}

function Shape() {
    this.points = [];
    this.lines = [];
    this.init();
}

Shape.prototype = {
    //Reset pointer to constructor
    constructor: Shape,
    //Init - finds Canvas
    init: function() {
        if (typeof this.context === 'undefined') {
            var canvas = document.getElementById('canvas');
            Shape.prototype.context = canvas.getContext('2d');
        }
    },
    //method to draw shape by looping through this.points
    draw: function() {
        var ctx = this.context;
        ctx.strokeStyle = this.getColour();
        ctx.beginPath();
        ctx.moveTo(this.points[0].x, this.points[0].y);
        for (var i = 1; i < this.points.length; i++) {
            ctx.lineTo(this.points[i].x, this.points[i].y);
        }
        ctx.closePath();
        ctx.stroke();
    },
}

var line = new Line({x: "10px", y: "10px"}, {x: "30px", y: "30px"});