1.- contexto canvas 2d

<canvas id="c"> </canvas>
<script>

    // declare the two variables at once using a comma
    var canvas_on_screen = document.getElementById("c"),
        context = canvas_on_screen.getContext("2d");
    // now you're ready to draw


    // x = 10, y = 20, width = 200, height = 100
    // It's a filled rectangle!!
    context.fillStyle = 'yellow';
    context.fillRect(10, 20, 200, 100);


    // setup the line style
    context.strokeStyle = 'blue';
    context.lineWidth = 5;
    context.lineCap = 'round';

    // draw the arc path
    context.arc(100, 50, 20, 0, 1.7*Math.PI, false);

    // colour the path
    context.stroke();


</script>