foo.js

        PIXI = require("pixi.js");

        var quadratic = require('adaptive-quadratic-curve')
        require('zepto')
        $ = window.Zepto;

        var spoint = [20, 20], c1 = [100, 159], epoint = [200, 20], scale = 2;

        var points = quadratic(spoint, c1, epoint, scale);

        var renderer = PIXI.autoDetectRenderer(1000,1000,{backgroundColor : 0xEEEEEE});
        $(renderer.view).attr('style', 'position:absolute; z-index:1;');
        document.body.append(renderer.view);
        stage = new PIXI.Container();
        //set a background
        var background_sprite = new PIXI.Sprite();
        background_sprite.height = renderer.height;
        background_sprite.width = renderer.width;
        var empty_background = new PIXI.Graphics();
        empty_background.beginFill(0xEEEEEE, 1);
        empty_background.moveTo(0, 0);
        empty_background.lineTo(renderer.width, 0);
        empty_background.lineTo(renderer.width, renderer.height);
        empty_background.lineTo(0, renderer.height);
        empty_background.lineTo(0, 0);
        empty_background.endFill();
        empty_background.interactive = true;
        background_sprite.texture = empty_background.generateTexture();
        stage.addChild(empty_background);
        renderer.render(stage);


        function start(e) {
            console.log("we're in start");
            var mouse_location = e.data.getLocalPosition(stage);
            _canvas = document.createElement("canvas");
            $(_canvas).attr('style', 'position:absolute; z-index:2;  pointer-events:none');
            $(_canvas).attr('id', 'draw_canvas');
            _canvas.width = renderer.width;
            _canvas.height = renderer.height;
            _context = _canvas.getContext("2d");
            _context.lineWidth = 4;
            _context.strokeStyle = '#000000';
            _context.lineCap = "round";
            _context.beginPath();
            _context.moveTo(mouse_location.x, mouse_location.y);
            last_x = mouse_location.x;
            last_y = mouse_location.y;
            $(renderer.view).parent().append(_canvas);
            last_draw_time = 0;	
            stage.mousemove = move;
            stage.mouseup = end;
        }

        function move(e) {
            //limit updates to once ever 10ms
            var time = Date.now();
            var time_diff = time - last_draw_time;
            if (time_diff < 10) return;
            last_draw_time = time;

            //only move 0.3 in the direction of the pointer, this smooths it out
            var mouse_location = e.data.getLocalPosition(stage);
            var new_x = last_x + 0.3 * (mouse_location.x - last_x);
            var new_y = last_y + 0.3 * (mouse_location.y - last_y);
            last_x = new_x;
            last_y = new_y;

            _context.lineTo(new_x, new_y);
            _context.stroke();
        }

        function end(e) {
            var mouse_location = e.data.getLocalPosition(stage);
            _context.lineTo(mouse_location.x, mouse_location.y);
            _context.stroke();
            var foregroundTexture = PIXI.Texture.fromCanvas(_canvas);
            var foregroundSprite = new PIXI.Sprite(foregroundTexture);
            stage.addChild(foregroundSprite);
            $("#draw_canvas").remove()
                renderer.render(stage);
            delete stage.mousemove;
            delete stage.mouseup;
        }

        empty_background.on('mousedown', start);
        empty_background.on('touchstart', start);
        console.log(empty_background);