Skip to content

Instantly share code, notes, and snippets.

@rickychilcott
Created April 21, 2017 20:12
Show Gist options
  • Save rickychilcott/af7097cd83a9022555a26f990e80acbd to your computer and use it in GitHub Desktop.
Save rickychilcott/af7097cd83a9022555a26f990e80acbd to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<body>
<canvas id="c" class="glucose_results"></canvas>
<button class="clear-canvas">Clear Canvas</button>
<button class="drawing-mode">Cancel drawing mode</button>
<button class="get-stuffs">Get Stuff</button>
</body>
<script>
$( document ).ready(function() {
(function() {
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
window.canvas = canvas;
fabric.Object.prototype.transparentCorners = false;
var drawingModeEl = $('.drawing-mode');
$('.clear-canvas').click(function() {
canvas.clear();
window.lastKnownX = 0;
window.ignoreMouseMove = false;
});
drawingModeEl.click(function() {
window.drawing = drawingModeEl;
canvas.isDrawingMode = !canvas.isDrawingMode;
if (canvas.isDrawingMode) {
drawingModeEl.text('Cancel drawing mode');
}
else {
drawingModeEl.text('Enter drawing mode');
}
});
$(".get-stuff").click(function() {
canvas.path
})
var pencil = new fabric.PencilBrush(canvas);
window.checkForNewXLine = function(pointer) {
window.lastKnownX = window.lastKnownX || 0;
if (pointer.x <= window.lastKnownX) {
return false;
}
window.lastKnownX = pointer.x;
return true;
}
pencil.onMouseDown = function(pointer) {
if(checkForNewXLine(pointer)){
this._prepareForDrawing(pointer);
// capture coordinates immediately
// this allows to draw dots (when movement never occurs)
this._captureDrawingPath(pointer);
this._render();
} else {
window.ignoreMouseMove = true;
}
};
pencil.onMouseMove = function(pointer) {
window.ignoreMouseMove = window.ignoreMouseMove || false;
if(window.ignoreMouseMove == false && checkForNewXLine(pointer)){
this._captureDrawingPath(pointer);
// redraw curve
// clear top canvas
this.canvas.clearContext(this.canvas.contextTop);
this._render();
}
};
pencil.onMouseUp = function(pointer) {
if (window.ignoreMouseMove == false) {
this._finalizeAndAddPath();
}
window.ignoreMouseMove = false;
};
canvas.freeDrawingBrush = pencil;
canvas.freeDrawingBrush.width = 2;
canvas.freeDrawingBrush.shadowBlur = 0;
canvas.freeDrawingBrush.shadowOffsetY = 0;
canvas.freeDrawingBrush.width = 1;
})();
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment