Lightning Component - Draw attachment image on HTML Canvas

Question

I have a custom object that has an attached (png) image to it. I'm trying to create a lightning component that pulls the attachment and draws it on a html canvas. So far in the below code, I'm able to get the img tag to show the attachment. However I cannot find a way for my helper/controller to grab that image and actually draw it on the canvas. How could I accomplish this?

.cmp:

<aura:component controller="ScreenshotEditorComponentController" implements="flexipage:availableForAllPageTypes, force:hasRecordId" access="global">
    <aura:handler name="init" action="{!c.init}" value="{!this}" />

    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="screenshot" type="Attachment" />

    <canvas aura:id="canvas" id="canvas" width="500" height="500"></canvas>

    <img aura:id="img" src="{!'/servlet/servlet.FileDownload?file=' + v.screenshot.Id}" onload="{c.test}"/>

</aura:component>

controller:

({
    init: function(component, event, helper) {
        helper.getData(component, component.get('v.recordId'));
    }
})

helper:

({
getData: function(component, recordId) {        
    var action = component.get('c.getScreenshotData');
    action.setParams({
        screenshotId: recordId
    });

    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === 'SUCCESS') {
             component.set('v.screenshot', response.getReturnValue());
        }
    });

    $A.enqueueAction(action);
},

Answer 1

Create renderer file in lighting component and put below code. This will draw image when image data is returned from apex call and set in img src attribute.

    ({
        afterRender :  function(cmp){
        this.superAfterRender();
        if(cmp.isValid()){
            var canvas = cmp.find("canvas").getElement();
            //var img = cmp.find("img").getElement();
            var ctx = canvas.getContext('2d');
            var image = new Image();
            //Change ID based on record or uncomment below line 
            //image.src = img.src;
            image.src =  "/servlet/servlet.FileDownload?file=00P7F0000026XRxUAM";
            image.onload = $A.getCallback(function() {
               window.setTimeout($A.getCallback(function(){
                    ctx.drawImage(image, 0, 0, 200, 300)
               },500));
            });    
        }
    }
})