canvas circle and rectangle

by seatsio

HTML

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    // unlike SVG, canvas has only one primitive shape, the rectangle
    ctx.fillStyle = "#FF0000";
    // rect coords are x,y,width,height
    ctx.fillRect(0, 0, 150, 75);
    ctx.beginPath();
    ctx.stroke();
</script>