Canvas Fiddle

by Ryan Brewer

HTML

<div id="behind">
<canvas id="bar" width="300" height="80" style="border: 1px solid black"></canvas>
</div>

CSS

#bar {
    
}
#behind {
    width: 300px;
    height: 80px;
    padding: 20px;
    background-color: blue;
}

JavaScript

var c = document.getElementById("bar");
var ctx = c.getContext("2d");
ctx.fillStyle = "#1c1c1c";
ctx.fillRect(0,0,300,80);
ctx.save();

ctx.arc(310, 40, 60, 0,2*Math.PI);
ctx.fillStyle = "blue";
ctx.fill();
ctx.clip();

ctx.beginPath();
ctx.moveTo(300,40);
ctx.lineTo(251,40);
ctx.strokeStyle = "red";
ctx.lineWidth = "5";
ctx.stroke();

ctx.restore();

ctx.beginPath();
ctx.moveTo(230,40);
ctx.lineTo(0,40);
ctx.lineWidth = "5";
ctx.strokeStyle = "red";
ctx.stroke();

ctx.save();

ctx.beginPath();
ctx.arc(310, 40, 70, 0,2*Math.PI);
ctx.strokeStyle = "blue";
ctx.stroke();

ctx.save();

ctx.beginPath();
ctx.arc(310, 40, 80, 0,2*Math.PI);
ctx.strokeStyle = "blue";
ctx.stroke();