JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<button type="button" id="clrMem">Clear Memory</button>
<input type="file" id="imageFile"/>
<hr/>
<div id="fabriccanvas"></div>
<div id="canvasContainer">
</div>
JavaScript
/* jshint ignore:start */
'use strict';
var currentImage, canvas, imageCanvas;
var fcFabric, oImg, canvas, fc;
var clrMem = document.getElementById('clrMem');
clrMem.onclick = function () {
currentImage.clearCanvas();
fcFabric.dispose();
};
var inheritsFrom = function (child, parent) {
child.prototype = Object.create(parent.prototype);
};
var Shaders = function () {};
Shaders.prototype.VSBase =
['attribute vec3 verticesPosition;',
'attribute vec2 texturePosition;' ,
'varying highp vec2 vTextureCoord;' ,
'uniform float flipY;' ,
'void main(void) {' ,
'gl_Position = vec4(verticesPosition * vec3(1.0, flipY, 1.0), 1.0);' ,
'vTextureCoord = texturePosition;' ,
'}'].join('\n');
Shaders.prototype.FSBaseImage =
['#ifdef GL_ES' ,
' precision highp float;',
' #endif ' ,
'uniform sampler2D uImage;' ,
' varying highp vec2 vTextureCoord;' ,
'void main (void) { ' ,
'gl_FragColor = texture2D(uImage, vTextureCoord);' ,
'}'].join('\n');
var Vertices = function () {};
Vertices.prototype.vertices = new Float32Array([
-1, -1, 0.0,
1, -1, 0.0,
1, 1, 0.0,
-1, 1, 0.0,
-1, -1, 0.0,
]);
Vertices.prototype.textureCoords = new Float32Array([
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0
]);
var WebGL = function () {};
WebGL.prototype.getGL = function (canvas) {
if (!this.gl) {
var names = [ 'webgl', 'experimental-webgl',
'webkit-3d', 'moz-webgl' ];
var gl;
for (var i = 0; i < names.length; ++i) {
try {
gl = canvas.getContext(names[i]);
} catch (e) {
}
if (gl) {
// got the WebGL context, no need to
// continue the loop.
break;
}
}
if (!gl) {
return null;
}
gl.viewportWidth = canvas.width;
...