Featured Post

Smart Product designer

Image
download and purchase link: https://alkanyx.com/item/49/Smart+Product+designer

Live preview : http://smartproductdesigner.000webhostapp.com/

Smart Product Designer is a  tool to create your own product and get directly from your website. It is well documented, very easy to customize and use. It is build using most advance technologies including javascript, jQuery and html5.
Features Choose different product from collectionAdd custom texts to product.Change text colorChange the size and font of the TextLet the user drag, move or remove elementsAdd images to product selected from art gallery or browse it from systemDesign both frontside and back-sideShows preview while designingDownload designVery easy to customize and useHere is the purchase link : https://alkanyx.com/item/49/Smart+Product+designer

Write text on HTML5 Canvas using fabricjs

Here is the code to add text on html5 canvas using fabricjs


<canvas id="c" width="600" height="600"></canvas>
<input type="text" class="add-text">  
<button class="add-text-btn">Add Text</button>


Javascript code:
var canvas = window._canvas = new fabric.Canvas('c');


fabric.Image.fromURL('http://fabricjs.com/assets/printio.png', function(img){
    canvas.add(img.scale(1).set({ left: 0, top: 0, angle: 0, selectable: false}));
});

canvas.renderAll();

document.querySelectorAll('.add-text-btn')[0].addEventListener('click', function(){

    var textToAdd = new fabric.Text(document.querySelectorAll('.add-text')[0].value, {
       fontFamily: 'arial'
    });

    canvas.add(textToAdd);

});

Link for jsfiddle https://jsfiddle.net/nvivekgoyal/ybogocmf/

Comments