fabric.Canvas is not a constructor - javascript

I've included fabric like so: <script src="js/fabric_freedrawing.js"></script>
But when I use it like this:
var canvas;
function initSketchPad() {
canvas = new fabric.Canvas('sketch-pad', {
isDrawingMode: true
});
}
I get
Uncaught TypeError: fabric.Canvas is not a constructor


I'm not sure what you have in your fabric_freedrawing.js file but adding your code to a snippet below seems to work just fine.
var canvas;
function initSketchPad() {
canvas = new fabric.Canvas('sketch-pad', {
isDrawingMode: true
});
}
initSketchPad();
canvas {
border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas height=300 width=300 id="sketch-pad">


your version of fabric.js isnt up to date all just not working well all u gotta do is download a new one simple just download it from here
https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js

Related

Fabricjs, on loadFromJSON the textBox is not gettin editable

I am facing an issue while using FabricJS
On using method loadFromJSON, It render the data but textBox text is not editable.
Any help?
Thanks!
Here is reproducible code
jsfiddle

You need to change the object type from text to i-text.
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
var json = '{"version":"3.6.3","objects":[{"type":"i-text","version":"3.6.3","originX":"left","originY":"top","left":100,"top":100,"width":579,"height":114.72,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"You have probably serialized your objects with one (or more) of them having a custom property or you created and serialized a new custom class altogether. Have a look here to get a better idea about the rules of Canvas serialization: http://fabricjs.com/docs/fabric.Canvas.html#toJSON;","fontSize":18,"fontWeight":"normal","fontFamily":"Montserrat","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"styles":{}}],"background":"#ffffff"}'
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
//fabric.log(o, object);
});
canvas {
border: 1px solid #999;
}
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
http://jsfiddle.net/moshfeu/mtyhreds/

Draw the ouput of a webglearth canvas to a 2d canvas

I am trying to copy the output of a canvas running webglearth (http://www.webglearth.org/) to a standard 2d canvas. I followed the answer to this question, but I can only see the background colour of the canvas.
My code is:
<html>
<body>
<div id="earthDiv" style="background-color:rgba(255,0,255,0.5); width:500px; height: 500px;"></div>
<canvas id="canvas" style="background-color:rgba(0,255,0,0.5); width:500px; height: 500px;"></canvas>
<script src="http://www.webglearth.com/v2/api.js"></script>
<script type="text/javascript">
window.onload = function () {
var earth = new WE.map("earthDiv");
var earthCanvas = earth.canvas;
var earthContext = earthCanvas.getContext("webgl", {
preserveDrawingBuffer: true,
});
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(earth);
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
setInterval(function () {
context.drawImage(earthContext.canvas, 0, 0);
}, 1000);
};
</script>
</body>
</html>

Turns out this is an issue:
https://github.com/webglearth/webglearth2/issues/104 , where the context for the canvas needs "preserveDrawingBuffer: true" when it is got for the first time.
It can be worked around by changing
Cesium.Scene({
canvas: this.canvas,
contextOptions: { webgl: { alpha: !0 !== c.sky } }
});
in http://www.webglearth.com/v2/api.js
to
Cesium.Scene({
canvas: this.canvas,
contextOptions: { webgl: { alpha: !0 !== c.sky, preserveDrawingBuffer: true } }
});
(and then saving it and using it as a local file).
It can be worked around by getting a png image using
earth.getScreenshot(function(dataUrl) {...}))
(see
https://github.com/webglearth/webglearth2/issues/60 )
However the png approach does not perform amazingly.

loadFromJSON doesn't including additional property in fabric js

I have this JSON: https://codepen.io/dhavalsisodiya/pen/RJNNXw
That json has additional property as textAnchor. Now the issue is when ever i am trying to load that json onto canvas, that textAnchor property doesn't get included on canvas object.
You can check the example here: https://codepen.io/dhavalsisodiya/pen/VdYLwo
As you can see on canavs textAnchor is not loaded on canvas.
So how to resolve this?
var json = '{"version":"2.2.2","objects":[{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":12.5,"top":67.32,"width":382.12,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.51,"scaleY":1.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{First_Name} {Last_Name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":8.5,"top":150,"width":585,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{first_name} {last_name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":7.5,"top":187,"width":587,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{address_1}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"}]}';
var canvas1 = new fabric.Canvas('canvas1');
canvas1.loadFromJSON(json);
// re-render the canvas
canvas1.renderAll();
console.log(JSON.stringify(canvas1));
<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
<canvas id="canvas1" style="border:1px solid black"></canvas>
Note: I have added textAnchor support using this question: How to use text-anchor : middle in fabric js
Also as per the doc: http://fabricjs.com/fabric-intro-part-3
We extended object's existing toObject method with additional property — "name", so that property is now part of toObject output, and as a result appears in canvas JSON representation. One more thing worth mentioning is that if you extend objects like this, you'll also want to make sure object's "class" (fabric.Rect in this case) has this property in "stateProperties" array, so that loading canvas from string representation would parse and add it to an object correctly.
So not sure which part of js i have to modify?

As in tutorial it's mentioned you can override toobject method to include your custom properties.
fabric.Textbox.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
textAnchor: this.textAnchor
});
};
})(fabric.Textbox.prototype.toObject);
DEMO
var json = '{"version":"2.2.2","objects":[{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":12.5,"top":67.32,"width":382.12,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.51,"scaleY":1.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{First_Name} {Last_Name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":8.5,"top":150,"width":585,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{first_name} {last_name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":7.5,"top":187,"width":587,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{address_1}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"}]}';
var canvas1 = new fabric.Canvas('canvas1');
fabric.Textbox.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
textAnchor: this.textAnchor
});
};
})(fabric.Textbox.prototype.toObject);
canvas1.loadFromJSON(json,function(){
// re-render the canvas
canvas1.renderAll();
console.log(JSON.stringify(canvas1));
});
<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
<canvas id="canvas1" style="border:1px solid black"></canvas>

I am using 2.4.6 and solve the things.
canvas.loadFromJSON(Json, function ()
{
debugger;
canvas.renderAll();
console.log(JSON.stringify(canvas));
var json = canvas.toJSON(['selectable', 'name', 'ownType', 'ddlValue', 'lockScalingX']);
console.log(JSON.stringify(json))
});

Why is addListener not a function?

I am using EaselJS and my task is to move a .png from right to left.
Since I bumped into an error I can't fix, I copied a work with the same goal and using createjs.Ticker.addListener to keep everything updated. I opened the other index.html with the included javascript and it worked perfectly. I proceeded to use this code as an example, but used my graphics. It is almost the same code, but it still tells me "TypeError: createjs.Ticker.addListener is not a function" I have no idea why the example works fine, but my code screws up like that.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/easeljs.js"></script>
<script>
var canvas, stage, child;
function draw () {
canvas = document.getElementById("canvas");
stage = new createjs.Stage( canvas );
var bg = new createjs.Bitmap( "bg.png" );
stage.addChild( bg );
var child = new createjs.Bitmap( "target.png" );
child.onTick = function ()
{
this.x --;
}
stage.addChild( child );
child.y = 100;
child.x = 100;
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS( 1 );
createjs.Ticker.addListener( stage , true );
createjs.Ticker.addListener( window , true );
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="650" height="400" style="background: #ccc;"></canvas>
</body>
</html>
EDIT
The error has been found. It wasn't the code, it was the easelJS-library itself that made the complications. I used a different version of the library and it worked. Thank you anyways :).

The function you are after is addEventListener
like this:
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}
CreateJS Ticker Documentation

I am having trouble processing my image using HTML5 Canvas and Javascript Filters from Pixastic, what am I doing wrong?

The Javascript "pixastic.custom (5) file was created from Pixastic using just the core code and "lighten" filter. The code works to redraw the image in the canvas in a Mozilla Broweser, however it is not filtering it. The HTML5 is coding the canvas, drawing the image on the canvas, and supposed to be redrawing the image through the Javascript Filter on to the canvas where it would then be lightened. Does any of this make sense?
Here is my code below:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="pixastic.custom (5).js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
var options ={};
Pixastic.process(imageObj, "lighten", options)
{amount : .5
};
options.resultCanvas;
context.drawImage(imageObj, 80, 60);
}
imageObj.src = "IMAG8703.jpg";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="2000" height="4000"></canvas>
</body>
</html>
Thank you for looking over my code...I really have no idea why it isn't working. Everything is in the same directory and everything matches up. The code is combined from the PIXASTIC site with HTML5 Canvas framework everything should work smoothly...

The problem is at the 7th line from the script tag. Not sure what you are trying to do but there's gonna be an error.
This is legal.
Pixastic.process(imageObj, "lighten", {amount : .5});

Categories