mercator map on canvas depends on datamaps

mercator map on canvas

   var width = 960,
            height = 500;

    var clip = d3.geo.clipExtent()
            .extent([
                [0, 0],
                [width, height]
            ]);

    var canvas = d3.select("body").append("canvas")
            .attr("width", width)
            .attr("height", height);

    var context = canvas.node().getContext("2d");

    context.lineJoin = "round";
    context.lineCap = "round";


    var projection = d3.geo.mercator()
            .scale((width + 1) / 2 / Math.PI)
            .translate([width / 2, height / 1.45]);

    var path = d3.geo.path()
            .projection(projection)
            .context(context);

    var world = Datamap.prototype.worldTopo;
    topojson.presimplify(world);

    var land = topojson.feature(world, world.objects.world);
    var boundary = topojson.mesh(world, world.objects.world, function (a, b) {
        return a !== b;
    });
    var countries = topojson.feature(world, world.objects.world).features;

    canvas.call(draw);

    function draw() {
        context.clearRect(0, 0, width, height);
        context.save();

        context.beginPath();
        path(land);
        context.fillStyle = "#000";
        context.fill();

        context.beginPath();
        path(boundary);
        context.strokeStyle = "#fff";
        context.stroke();

        context.beginPath();
        countries.forEach(function (country, index) {
       //     console.log(country);
            if (index % 2 === 0) {
                path(country);
                context.fillStyle = "green";
                context.fill();
            }
        });

        context.restore();
    }

    d3.select(self.frameElement).style("height", height + "px");