101-fabricjs Drawing Mode

INTRODUCTION

Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML <canvas> element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the <canvas> element.

STEPS

1) Add fabricjs library path

2) Add canvas element to html body

3) Add js codes to bind canvas element to control object.

4) Add button element and bind to onclick event to clear the canvas.

CODES

101.0.Startup Source codes

<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.5/fabric.min.js"></script>
</head>
<body>
<canvas id="c" width="300" height="300"
style="border:1px solid #000000">
</canvas>
<div style="display: inline-block; margin-left: 10px">
<button id="clear-canvas" class="btn btn-info">Clear</button><br>
<label for="drawing-color">Line color:</label>
<input type="color" value="#005E7A" id="drawing-color"><br>
</div>
<script>
var canvas = new fabric.Canvas('c',{
isDrawingMode: true
});
var btnClear=document.getElementById("clear-canvas");
btnClear.onclick = function() {
canvas.clear()
};
var btnDrawingColor=document.getElementById("drawing-color");
btnDrawingColor.onchange = function() {
canvas.freeDrawingBrush.color = this.value;
};
</script>
</body>
</html>

</body>

</html>

OUTCOME

101.1.Full Codes From http://fabricjs.com/freedrawing

<html>

<head>

</head>

<body>

<canvas id="c" width="300" height="300"

style="border:1px solid #000000">

</canvas>

<button id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>

<button id="clear-canvas" class="btn btn-info">Clear</button><br>

<option>Pencil</option>

<option>Circle</option>

<option>Spray</option>

<option>Pattern</option>

<option>hline</option>

<option>vline</option>

<option>square</option>

<option>diamond</option>

<option>texture</option>

</select><br>

<label for="drawing-line-width">Line width:</label>

<label for="drawing-color">Line color:</label>

<label for="drawing-shadow-color">Shadow color:</label>

<label for="drawing-shadow-width">Shadow width:</label>

<label for="drawing-shadow-offset">Shadow offset:</label>

</div>

var $ = function(id){return document.getElementById(id)};

var canvas = this.__canvas = new fabric.Canvas('c', {

isDrawingMode: true

});

fabric.Object.prototype.transparentCorners = false;

var drawingModeEl = $('drawing-mode'),

drawingOptionsEl = $('drawing-mode-options'),

drawingColorEl = $('drawing-color'),

drawingShadowColorEl = $('drawing-shadow-color'),

drawingLineWidthEl = $('drawing-line-width'),

drawingShadowWidth = $('drawing-shadow-width'),

drawingShadowOffset = $('drawing-shadow-offset'),

clearEl = $('clear-canvas');

clearEl.onclick = function() { canvas.clear() };

drawingModeEl.onclick = function() {

canvas.isDrawingMode = !canvas.isDrawingMode;

if (canvas.isDrawingMode) {

drawingModeEl.innerHTML = 'Cancel drawing mode';

drawingOptionsEl.style.display = '';

}

else {

drawingModeEl.innerHTML = 'Enter drawing mode';

drawingOptionsEl.style.display = 'none';

}

};

if (fabric.PatternBrush) {

var vLinePatternBrush = new fabric.PatternBrush(canvas);

vLinePatternBrush.getPatternSrc = function() {

var patternCanvas = fabric.document.createElement('canvas');

patternCanvas.width = patternCanvas.height = 10;

var ctx = patternCanvas.getContext('2d');

ctx.strokeStyle = this.color;

ctx.lineWidth = 5;

ctx.beginPath();

ctx.moveTo(0, 5);

ctx.lineTo(10, 5);

ctx.closePath();

ctx.stroke();

return patternCanvas;

};

var hLinePatternBrush = new fabric.PatternBrush(canvas);

hLinePatternBrush.getPatternSrc = function() {

var patternCanvas = fabric.document.createElement('canvas');

patternCanvas.width = patternCanvas.height = 10;

var ctx = patternCanvas.getContext('2d');

ctx.strokeStyle = this.color;

ctx.lineWidth = 5;

ctx.beginPath();

ctx.moveTo(5, 0);

ctx.lineTo(5, 10);

ctx.closePath();

ctx.stroke();

return patternCanvas;

};

var squarePatternBrush = new fabric.PatternBrush(canvas);

squarePatternBrush.getPatternSrc = function() {

var squareWidth = 10, squareDistance = 2;

var patternCanvas = fabric.document.createElement('canvas');

patternCanvas.width = patternCanvas.height = squareWidth + squareDistance;

var ctx = patternCanvas.getContext('2d');

ctx.fillStyle = this.color;

ctx.fillRect(0, 0, squareWidth, squareWidth);

return patternCanvas;

};

var diamondPatternBrush = new fabric.PatternBrush(canvas);

diamondPatternBrush.getPatternSrc = function() {

var squareWidth = 10, squareDistance = 5;

var patternCanvas = fabric.document.createElement('canvas');

var rect = new fabric.Rect({

width: squareWidth,

height: squareWidth,

angle: 45,

fill: this.color

});

var canvasWidth = rect.getBoundingRect().width;

patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;

rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });

var ctx = patternCanvas.getContext('2d');

rect.render(ctx);

return patternCanvas;

};

var img = new Image();

img.src = '../assets/honey_im_subtle.png';

var texturePatternBrush = new fabric.PatternBrush(canvas);

texturePatternBrush.source = img;

}

$('drawing-mode-selector').onchange = function() {

if (this.value === 'hline') {

canvas.freeDrawingBrush = vLinePatternBrush;

}

else if (this.value === 'vline') {

canvas.freeDrawingBrush = hLinePatternBrush;

}

else if (this.value === 'square') {

canvas.freeDrawingBrush = squarePatternBrush;

}

else if (this.value === 'diamond') {

canvas.freeDrawingBrush = diamondPatternBrush;

}

else if (this.value === 'texture') {

canvas.freeDrawingBrush = texturePatternBrush;

}

else {

canvas.freeDrawingBrush = new fabric[this.value + 'Brush'](canvas);

}

if (canvas.freeDrawingBrush) {

canvas.freeDrawingBrush.color = drawingColorEl.value;

canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;

canvas.freeDrawingBrush.shadow = new fabric.Shadow({

blur: parseInt(drawingShadowWidth.value, 10) || 0,

offsetX: 0,

offsetY: 0,

affectStroke: true,

color: drawingShadowColorEl.value,

});

}

};

drawingColorEl.onchange = function() {

canvas.freeDrawingBrush.color = this.value;

};

drawingShadowColorEl.onchange = function() {

canvas.freeDrawingBrush.shadow.color = this.value;

};

drawingLineWidthEl.onchange = function() {

canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1;

this.previousSibling.innerHTML = this.value;

};

drawingShadowWidth.onchange = function() {

canvas.freeDrawingBrush.shadow.blur = parseInt(this.value, 10) || 0;

this.previousSibling.innerHTML = this.value;

};

drawingShadowOffset.onchange = function() {

canvas.freeDrawingBrush.shadow.offsetX = parseInt(this.value, 10) || 0;

canvas.freeDrawingBrush.shadow.offsetY = parseInt(this.value, 10) || 0;

this.previousSibling.innerHTML = this.value;

};

if (canvas.freeDrawingBrush) {

canvas.freeDrawingBrush.color = drawingColorEl.value;

canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;

canvas.freeDrawingBrush.shadow = new fabric.Shadow({

blur: parseInt(drawingShadowWidth.value, 10) || 0,

offsetX: 0,

offsetY: 0,

affectStroke: true,

color: drawingShadowColorEl.value,

});

}

</script>

</body>

</html>

OUTCOME

REFERENCES

http://fabricjs.com/freedrawing

https://github.com/kangax/fabric.js

https://www.sitepoint.com/introduction-to-fabric-js/

https://codepen.io/chriscoyier/pen/acqIe (auto resize html5 canvas)

CODEPEN

See the Pen 101.1-fabricjs-free-drawing by notarazi (@notarazi) on CodePen.

Programming Steps

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Thursday, September 1, 2016