fabricjs

I have the following which doesn't work correctly: var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); }); var started = false; var x = 0; var y = 0; /* Mousedown */ function mousedown(e) { var mouse = canvas.getPointer(e.memo.e); started = true; x = mouse.x; y = mouse.y; var square = new fabric.Rect({ width: 1, height: 1, left: mouse.x, top: mouse.y, fill: '#000' }); canvas.add(square); canvas.renderAll(); canvas.setActiveObject

I've been playing with Fabric.js a lot in the last few weeks, but regarding text fields I've only found it possible to set the text on creation. Is there any possible way to make an interactive text field, or do I have to find a workaround to achieve that? (With interactive text field I mean an area of the canvas I can click on and write directly into it.) The latest version of fabric.js includes a class IText which incorporates the interaction for editing and selection of text dynamically. try the code below with the latest version of fabric.js canvas.add(new fabric.IText('Tap and Type', {

When I rotate an image in fabricjs, the top-left corner's coordinates are not updated after rotated. Instead, the top-left corner of the image still refers to the old point. I believe that it should recalculate the top-left corner based on the image's new position. Is there a way to achieve this? Any help is appreciated! Below is the code for image rotation: function rotate(){ activeCanvas.forEachObject(function(obj){ if(obj instanceof fabric.Image){ curAngle = obj.getAngle(); obj.setAngle(curAngle-90); } }); activeCanvas.renderAll(); } Now, after the rotation, I want top-left coordinates of

I'm trying to use a mouse:down event on canvas like: canvas.on('mouse:down', function(options) {} How can I use touchstart event handler? I hope this helps // TOUCH EVENTS canvas.addEventListener("touchstart", function (e) { e.preventDefault(); var mousePos = getTouchPos(canvas, e); var touch = e.touches[0]; // do_mouse_click_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY); }, false); canvas.addEventListener("touchend", function (e) { e.preventDefault(); var mousePos = getTouchPos(canvas, e); // do_mouse_up_logic(mousePos.x, mousePos.y); }, false); canvas.addEventListener(

I am trying to export an image 4x the size of the canvas one. With var dataURL = canvas.toDataURL(); I get the image set to the size of the canvas However when I try var dataURL = canvas.toDataURLWithMultiplier(4); I get the error "canvas.toDataURLWithMultiplier is not a function" Here is my function below. $('.preview').on('click touchstart', function() { // save canvas image as data url (png format by default) canvas.isGrabMode = false; canvas.setZoom(1.0); canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; // var dataURL = canvas.toDataURL(); var dataURL = canvas.toDataURLWithMultiplier(4); //

I'm able to get the jquery response on the triggering but the fabric canvas is not acting on the event. I expect this fiddle to deselect the IText element: fiddle I know the fabric canvas got a trigger event, but it's not working too. var canvas = new fabric.Canvas("c"); var test = jQuery("#c"); test.on("mouse:down", function (){ alert("you clicked me"); canvas.renderAll(); debugger; }); canvas.on({"mousedown": function() { alert("you clicked me too"); }}); $("#testClick").click(function() { var e = jQuery.Event("mouse:down", { pageX: 10, pageY: 10 }); jQuery(canvas).trigger(e);//Missed - not

I'm using jspdf.js to create pdf from HTML 5 canvas. However, regardless of what the contents are and how big the canvas size is, the generated file size is always 32,874 KB, even when the canvas is completey empty. Why the file size is always the same? jsPDF version is 1.1.135. My code is like this: var imgData = canvas.toDataURL("image/jpeg", 1.0); var width = $("canvas").attr('width'); var height = $("canvas").attr('height'); var pdf = new jsPDF('p', 'pt', [width,height]); pdf.addImage(imgData, 'JPEG', 0, 0, width, height); pdf.save("download.pdf"); UPDATE: Full code: $scope.rasterizePDF =