{"id":3515,"date":"2014-03-27T07:53:19","date_gmt":"2014-03-27T07:53:19","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/27\/how-to-make-kineticjs-custom-shape-collection-of-common-programming-errors-2\/"},"modified":"2014-03-27T07:53:19","modified_gmt":"2014-03-27T07:53:19","slug":"how-to-make-kineticjs-custom-shape-collection-of-common-programming-errors-2","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/27\/how-to-make-kineticjs-custom-shape-collection-of-common-programming-errors-2\/","title":{"rendered":"How to make KineticJs custom shape-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/c1ff13e929f696c0ceab0756d7a0d77b?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nArif<\/p>\n<p>I am trying to make KineticJs html 5 custom shape.<\/p>\n<p>But it is not working in Google chrome. Not draggable in Firefox and also shape are not same in size.<\/p>\n<p>Can anybody tell why?<\/p>\n<p>live code http:\/\/jsfiddle.net\/prantor19\/wGE2a\/8\/<\/p>\n<pre><code>var stage = new Kinetic.Stage({\n    container: 'canvas-container',\n    width: 500,\n    height: 500,\n});\n\nvar layer = new Kinetic.Layer();\n\ndrawWindow = function(canvas) {\n    var context = canvas.getContext();\n    context.beginPath();\n    context.moveTo(this.attrs.x,this.attrs.y);\n    context.lineTo(this.attrs.width,this.attrs.y);\n    context.lineTo(this.attrs.width,this.attrs.height);\n    context.lineTo(this.attrs.x,this.attrs.height);\n    context.closePath();\n    context.clip();\n    context.drawImage(img,this.attrs.img_x,this.attrs.img_y);\n}\n\nimg = document.createElement('img');\nimg.src= \"http:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/14\/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG\/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG\";\n\nvar window1 = new Kinetic.Shape({\n    drawFunc: drawWindow,\n    x: 0,\n    y: 0,\n    width: 100,\n    height: 100,\n    img:img,\n    img_x:0,\n    img_y:0,\n    draggable: true\n});\n\nvar window2 = new Kinetic.Shape({\n    drawFunc: drawWindow,\n    x: 10,\n    y: 60,\n    width: 100,\n    height: 100,\n    img:img,\n    img_x:-250,\n    img_y:0,\n    draggable: true\n});\n\npointercursor = function() {\n    document.body.style.cursor = 'pointer';\n}\ndefaultCursor = function() {\n    document.body.style.cursor = 'default';\n}\n\nwindow1.on('mouseover',pointercursor );\nwindow1.on('mouseout', defaultCursor);\nwindow2.on('mouseover',pointercursor );\nwindow2.on('mouseout', defaultCursor);\n\nlayer.add(window1);\nlayer.add(window2);\n\nstage.add(layer);\n<\/code><\/pre>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/82048dc23b612b9a57d84680931956ca?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nsincebasic<\/p>\n<p>Your script has errors in it<\/p>\n<blockquote>\n<p>Unable to get image data from canvas because the canvas has been tainted by cross-origin data. kinetic-v4.3.2-beta.js:4365 Uncaught Error: SecurityError: DOM Exception 18<\/p>\n<\/blockquote>\n<p>Chrome refuse to work with cross domain images on cavas.<\/p>\n<p>For dragging, you need to add this set stroke for the shape<\/p>\n<pre><code>stroke: 'black',\n<\/code><\/pre>\n<p>and at the end of drawFunc<\/p>\n<pre><code>canvas.fillStroke(this);\n<\/code><\/pre>\n<p>Here is the my working version from yours<\/p>\n<p>http:\/\/jsfiddle.net\/W7SGT\/<\/p>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/fd1ef60beee1f37f4dbda363aaa23ad5?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nEric Rowell<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Arif I am trying to make KineticJs html 5 custom shape. But it is not working in Google chrome. Not draggable in Firefox and also shape are not same in size. Can anybody tell why? live code http:\/\/jsfiddle.net\/prantor19\/wGE2a\/8\/ var stage = new Kinetic.Stage({ container: &#8216;canvas-container&#8217;, width: 500, height: 500, }); var layer = new Kinetic.Layer(); [&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-3515","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3515","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=3515"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3515\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}