HTML5 Canvas Example

HTML

<canvas id="canvas" width="480" height="320"></canvas>

CSS

#canvas {
    
}
#background {
    display: none;
}
#ballon {
    position: absolute;
    top: 50px;
    left: 50px;
    cursor: move;
    opacity: 0.5;
}

JavaScript

$(document).ready(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'black';
    context.fill();

    paintName(context, canvas);
    drawLine(context);
});



function paintName(context, canvas) {

    context.textAlign = "left";
    context.font = "16pt Arial";
    context.fillStyle = 'red';
    context.fillText('G5', context.canvas.width - 35, 18);
    context.strokeStyle = 'red';
    
  context.save();
}

function drawLine(context){
    var gatingCoords = [[30, 120], [50, 300]];
    var nextX, nextY, pointX, pointy;
    
    context.lineWidth = 4;
    
    for (var i = 0; i < gatingCoords.length; i++) {

        pointX = gatingCoords[i][0];
        pointY = gatingCoords[i][1];


        if (i === gatingCoords.length - 1) {
            nextX = gatingCoords[0][0];
            nextY = gatingCoords[0][1];
        } else {
            nextX = gatingCoords[i + 1][0];
            nextXY = gatingCoords[i + 1][1];
        }

        context.moveTo(pointX, pointY);
        context.lineTo(nextX, nextY);
    }

    context.stroke();
}