JSFiddle - React, Tailwind, and code Playground

by Yoichiro Tanaka

HTML

<script src="http://www.eisbahn.jp/test/jquery-1.11.1.min.js"></script>
<script src="http://www.eisbahn.jp/test/jcanvas.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="mycontroller1">
        <mydirective text="foo" on-load="onLoad(api)"></mydirective>
        <button ng-click="getBlob()">Get BLOB</button>
        <div>{{blob}}</div>
    </div>
</div>

CSS

div {
    font-size: 9px;
}

JavaScript

var myapp = angular.module("myapp", []);

myapp.controller("mycontroller1", ["$scope", function($scope) {
    $scope.getBlob = function() {
        $scope.blob = $scope.api.getBlob();
    };
    $scope.onLoad = function(api) {
        $scope.api = api;
    };
}]);

myapp.directive("mydirective", [function() {
    return {
        restrict: "E",
        template: "<canvas width=\"100\" height=\"100\"></canvas>",
        scope: {
            onLoad: "&",
            text: "@"
        },
        compile: function(element, attrs) {
            return function(scope, element, attrs, ctrl) {
                $(element.find("canvas")).drawText({
                    strokeStyle: "green",
                    strokeWidth: "1",
                    x: 50,
                    y: 50,
                    fontSize: 12,
                    fontFamily: "sans-serif",
                    text: scope.text
                }).drawRect({
                    strokeStyle: "blue",
                    strokeWidth: 1,
                    x: 50,
                    y: 50,
                    width: 50,
                    height: 50
                });
                if (scope.onLoad) {
                    scope.onLoad({
                        api: (function(scope, element) {
                            return {
                                getBlob: function() {
                                    var canvas = $(element.find("canvas"));
                                    return canvas.getCanvasImage("png");
                                }
                            };
                        })(scope, element)
                    });
                }
            };
        }
    };
}]);