Click here to Skip to main content
15,558,870 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello, please can someone help me solve the problem adding canvas with fabric.js inside an iframe.

I have a button that allows me to add rectangles to a canvas. I created the canvas object with fabric.js that I added inside an iframe despite all the tests I did but it doesn't work.  Can someone help me solve this problem please?


Errors I get:

Error 1:
Error 1VM6034:32Uncaught TypeError: Cannot read property 'add' of null    at Add (<anonymous>:32:12)    at HTMLButtonElement.onclick ((index):1)


Error 2:
VM6034:36Uncaught TypeError: fabric.Control is not a constructor    at <anonymous>:36:52    at Object.coreUtilsModule.executeScripts(coreUtils.js:304)    atHTMLScriptElement.newScript.onload.newScript.onerror (coreUtils.js:288


What I have tried:

HTML
<html><head>
  <meta charset="utf-8"/>

<title>monfabrick</title>
<script src="fabric.min.js"></script>

<script type="text/javascript">

var iframeDocument = document.getElementById('myiframe').contentWindow.document;
var canvas = iframeDocument.getElementById('c');
var fabricCanvas = new fabric.Canvas(canvas);


    	//var canvas = this.__canvas = new fabric.Canvas('c');
	// create a rect object
  var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

  var img = document.createElement('img');
  img.src = deleteIcon;

  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.cornerColor = 'blue';
  fabric.Object.prototype.cornerStyle = 'circle';

  function Add() {
    var rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'yellow',
      width: 200,
      height: 100,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });

    canvas.add(rect);
    canvas.setActiveObject(rect);
  }

  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: 16,
    cursorStyle: 'pointer',
    mouseUpHandler: deleteObject,
    render: renderIcon,
    cornerSize: 24
  });

  Add();

  function deleteObject(eventData, target) {
		var canvas = target.canvas;
		    canvas.remove(target);
        canvas.requestRenderAll();
	}

  function renderIcon(ctx, left, top, styleOverride, fabricObject) {
    var size = this.cornerSize;
    ctx.save();
    ctx.translate(left, top);
    ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
    ctx.drawImage(img, -size/2, -size/2, size, size);
    ctx.restore();
  }
    	</script>
    	
   <style type="text/css" >
 
    	  .controls {
  	display: inline-block;
  }

</style>

</head>

<body>
<div class="controls">
    <p>
      <button id="add" onclick="Add()">Add a rectangle</button>
    </p>
  </div>

 <iframe id="myiframe" width="400" height="400"  src="http://localhost:7007/mapage/" name="moniframe" contenteditable="true" class="embed-responsive-item" allowfullscreen> </iframe>
 </body></html>
Posted
Updated 25-Aug-20 9:35am

1 solution

The
fabric.Control is not a constructor
issue has to do with the version of fabric.js that you are using.
The error does not occur with
version: "4.1.0"


Get the script tag here

The
Cannot read property 'add' of null
error is occurring because your
iframeDocument.getElementById('c');
is handing back a null. So... does the document in the iframe contain a canvas with id='c'?

If it does, then where you're getting the iframe document, maybe try like this?

var iframe = document.getElementById('myiframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;


Good luck!
 
Share this answer
 
v2
Comments
Member 11837260 27-Aug-20 20:16pm    
Thank you for your answer !

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900