Traffic light sequence
Ah, you moved your &lt;h1&gt; into the &lt;body&gt;. Still, what exactly are you looking for? File size (--> code reduction)? Speed optimization?

One simple thing would be using parameters to reduce code duplication:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.rect(0, 0, 200, 300);
ctx.fillStyle = "grey";
ctx.fill();

var colours = ["red", "yellow", "green",  "red yellow"];
var current = colours[0];

function offlight(a1) {
    ctx.beginPath();
    ctx.arc(95, a1, 40, 10, 12 * Math.PI);
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.stroke();
}

function drawLight(a1, fillParam) {
    ctx.beginPath();
    ctx.arc(95, a1, 40, 10, 12 * Math.PI);
    ctx.fillStyle = fillParam;
    ctx.fill();
    ctx.stroke();
}

function changelight() {
    if (current == colours[0]) {
        drawLight(50, "red");
        offlight(150);
        offlight(250);
        current = colours[4]
    } else if (current == colours[4]) {
        drawLight(50, "red");
        drawLight(150, "yellow");
        offlight(250);
        current = colours[2]
    } else if (current == colours[2]) {
        offlight(50);
        offlight(150);
        drawLight(250, "green");
        current = colours[1]
    } else if (current == colours[1]) {
        offlight(50);
        drawLight(150, "yellow");
        offlight(250);
        current = colours[0]
    }

}
setInterval(changelight, 1000);


Do you ever use colours? ("yellow")

You could also remove the whitespaces and shorten variable and function names. Also think about moving your JS into a separate file.

Here is a working fiddle.