Displaying a heat map

We're all set to display a heat map. In this task we'll process the click data in order to generate the heat map, and then display it using the <canvas> element on top of the <iframe>.

Engage Thrusters

First of all we can add a success handler for the AJAX request we made at the end of the last task. We can do this by chaining the done() method to the ajax() method:

}).done(function (clicks) {

    var loadedHeight = $("html", iframe[0].contentDocument)
.outerHeight();

    doc.find("section").height(loadedHeight);

    canvas.width = doc.width();
    canvas.height = loadedHeight;
    $(canvas).appendTo(doc.find("section"))
             .trigger("canvasready", { clicks: clicks });

});

We can then add a handler for the custom canvasready event. This should be added directly after the iframeloaded event handler:

doc.on("canvasready", function (e, clickdata) {

    var docWidth = canvas.width,
        docHeight = canvas.height,
        ctx = canvas.getContext...