{"id":3553,"date":"2014-03-28T10:36:10","date_gmt":"2014-03-28T10:36:10","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/28\/canvas-coordinates-in-fabric-js-have-offset-collection-of-common-programming-errors\/"},"modified":"2014-03-28T10:36:10","modified_gmt":"2014-03-28T10:36:10","slug":"canvas-coordinates-in-fabric-js-have-offset-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/28\/canvas-coordinates-in-fabric-js-have-offset-collection-of-common-programming-errors\/","title":{"rendered":"Canvas coordinates in Fabric.js have offset-Collection of common programming errors"},"content":{"rendered":"<p>I just started with fabric.js and I have a (probably beginner) error:<\/p>\n<p>I am using fabric with jquery with the following code:<\/p>\n<pre><code>$(document).ready(function () {\n\ncanvas = new fabric.StaticCanvas('scroller');\n\ncanvas.add(\n  new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })\n);\n\n});\n<\/code><\/pre>\n<p>This code should draw a 140&#215;100 Rectangle on the canvas. Sadly, only a quarter of the Rectangle appears. If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas.<\/p>\n<p>So it seems, that the canvas origin is not at 0\/0, but at sth. higher.<\/p>\n<p>Does someone know how to fix this or what I am doing wrong?<\/p>\n<p>Thanks in advance, McFarlane<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I just started with fabric.js and I have a (probably beginner) error: I am using fabric with jquery with the following code: $(document).ready(function () { canvas = new fabric.StaticCanvas(&#8216;scroller&#8217;); canvas.add( new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: &#8216;#f55&#8217; }) ); }); This code should draw a 140&#215;100 Rectangle on the canvas. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3553","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3553"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3553\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}